Vue- Perks - Vue.js Feed #.\n\nVue-rewards lets you add micro-interactions to your Vue 3 app, and also incentives customers along with the storm of confetti, emoji or even balloons in few seconds.\n\nVue 3 simply. Certainly not compatible along with Vue 2.\nThis bundle is a port of react-rewards.\nDemo.\nListed here is an easy demo as well as listed here is actually the code for the demonstration.\nAbout.\nvue-rewards allows you include micro-interactions to your application, and also perks customers along with the rainfall of confetti, emoji or balloons in secs.\nShooting confetti all over the page might feel like a dubious tip, but remember that rewarding customers for their activities is certainly not.\nIf a big cloud of smiling emoji does not match your use effectively, attempt modifying the physics config to make it more understated.\nYou may find out more on micro-interactions in my blog-- https:\/\/www.thedevelobear.com\/post\/microinteractions\/.\nInstallation.\npnpm install vue-rewards.\nor even.\nyarn include vue-rewards.\nor even.\nnpm mount vue-rewards.\nIf you consider to use this with the Options API after that you will need to have to add the complying with code to your main.js (or you may locate the plugin registration in plugins\/index. js):.\nimport createApp coming from \"vue\".\nbring in Application coming from \".\/ App.vue\".\nimport VueRewards coming from \"vue-rewards\".\n\/\/ your various other plugins will definitely be actually imported listed below.\n\nconst application = createApp( App).\n\n\/\/ This is the almost all.\napp.use( VueRewards).\n\napp.mount(\" #app\").\nUse.\nIf you want to make use of the incentives, you'll need to supply an aspect that is going to become the source of the computer animation. This factor requires to possess an ID that matches the one made use of - it could be anywhere in the DOM just as long as the I.d. match.\nYou can place the factor inside a button, facility it as well as skyrocket coming from the button.\nYou can easily put it on top of the viewport with placement: \"repaired\" and also change the perspective to 270, to shoot downwards.\nTry, practice, have fun!\nComputer animation fragments are readied to setting: 'corrected' through default, but this can be altered through a config things.\nYou can easily utilize this plan in both the composition API as well as the options API.\nUsing the Make-up API.\n\n\n\nPermit's celebrate!\n\nClick me!\n\n\nUtilizing the Options API.\nDue to the fact that our company enrolled the plugin earlier we now have access to the $reward strategy in our components. $perks coincides as useReward. To acquire the like over our experts perform:.\n\nPermit's celebrate!\n\nClick me!\n\n\n\n\nProps & config.\nuseReward\/$ reward params:.\nlabel.\nkind.\ndescription.\nneeded.\ndefault.\ni.d..\ncord.\nA distinct i.d. of the aspect you wish to shoot coming from.\nindeed.\n\nstyle.\ncord.\n' confetti'.\n' balloons'.\n'em oji'.\ncertainly.\n' confetti'.\nconfig.\nthings.\nan arrangement object defined listed below.\nno.\nsee below.\nConfetti config item:.\nname.\nkind.\ndescription.\ndefault.\nlifetime.\nvariety.\nopportunity of lifestyle.\n200.\nviewpoint.\namount.\ninitial path of bits in degrees.\n90.\ndegeneration.\namount.\njust how much the speed lowers with each structure.\n0.94.\nescalate.\nnumber.\nspreading of bits in levels.\nForty five.\nstartVelocity.\nnumber.\ninitial velocity of fragments.\n35.\nelementCount.\namount.\nfragments amount.\nFifty.\nelementSize.\namount.\nbit measurements in px.\n8.\nzIndex.\namount.\nz-index of bits.\n0\nposition.\nstrand.\nsome of CSSProperties [' setting'] - e.g. \"absolute\".\n\" dealt with\".\ncolours.\nstring [] An array of colours made use of when creating confetti.\n[#A 45BF1', '# 25C6F6', '# 72F753', '#F 76C88', '#F 5F770'] onAnimationComplete.\n() => space.\nA feature that works when computer animation completes.\nundefined.\nBalloons config item:.\nname.\nkind.\ndescription.\ndefault.\nlifetime.\namount.\ntime of lifestyle.\n600.\nperspective.\nnumber.\npreliminary path of balloons in levels.\n90.\ndegeneration.\namount.\nthe amount of the velocity reduces along with each frame.\n0.999.\nescalate.\nnumber.\nescalate of balloons in levels.\nFifty.\nstartVelocity.\nnumber.\npreliminary velocity of the balloons.\n3.\nelementCount.\namount.\nballoons amount.\n10.\nelementSize.\nnumber.\nballoons dimension in px.\n20.\nzIndex.\nnumber.\nz-index of balloons.\n0\nposition.\ncord.\namong CSSProperties [' placement'] - e.g. \"outright\".\n\" repaired\".\ncolours.\nstrand [] An assortment of different colors utilized when creating balloons.\n[#A 45BF1', '# 25C6F6', '# 72F753', '#F 76C88', '
F 5F770'] onAnimationComplete.() => gap.A function that operates when animation completes.undefined.Emoji config object:.label.style.classification.nonpayment.life time.variety.opportunity of life.200.position.amount.first path of emoji in levels.90.degeneration.number.how much the speed decreases with each framework.0.94.spread.number.escalate of emoji in degrees.Forty five.startVelocity.number.first rate of emoji.35.elementCount.number.emoji amount.20.elementSize.number.emoji measurements in px.25.zIndex.amount.z-index of emoji.0setting.cord.among CSSProperties [' posture'] - e.g. "complete"." corrected".emoji.strand [] A collection of emoji to shoot.onAnimationComplete.() => void.A feature that operates when animation completes.undefined.