Vue- Incentives - Vue.js Feed #.\n\nVue-rewards permits you include micro-interactions to your Vue 3 application, as well as incentives customers with the rain of confetti, emoji or even balloons in seconds.\n\nVue 3 simply. Certainly not appropriate with Vue 2.\nThis bundle is actually a slot of react-rewards.\nDemo.\nListed here is a simple demo and listed below's the code for the trial.\nAbout.\nvue-rewards allows you incorporate micro-interactions to your app, and also perks users with the storm of confetti, emoji or even balloons in secs.\nShooting confetti across the webpage might appear like a suspicious concept, but keep in mind that rewarding customers for their activities is certainly not.\nIf a big cloud of smiling emoji doesn't accommodate your request properly, choose transforming the physics config to make it much more subtle.\nYou can easily read more on micro-interactions in my post-- https:\/\/www.thedevelobear.com\/post\/microinteractions\/.\nInstallation.\npnpm put up vue-rewards.\nor.\nyarn include vue-rewards.\nor.\nnpm put in vue-rewards.\nIf you intend to use this with the Options API after that you will certainly need to include the complying with code to your main.js (or you may locate the plugin registration in plugins\/index. js):.\nimport createApp from \"vue\".\nimport Application coming from \".\/ App.vue\".\nbring in VueRewards coming from \"vue-rewards\".\n\/\/ your other plugins are going to be imported listed below.\n\nconst app = createApp( App).\n\n\/\/ This is the main part.\napp.use( VueRewards).\n\napp.mount(\" #app\").\nUse.\nTo make use of the rewards, you'll need to have to provide an element that will certainly come to be the origin of the animation. This element requires to possess an i.d. that matches the one utilized - it can be anywhere in the DOM just as long as the I.d. suit.\nYou can easily position the aspect inside a button, facility it and soar coming from the button.\nYou can put it atop the viewport along with placement: \"taken care of\" and transform the angle to 270, to fire downwards.\nTry, practice, have fun!\nAnimation particles are set to setting: 'dealt with' by default, but this can be changed with a config things.\nYou can use this bundle in both the structure API and also the alternatives API.\nUtilizing the Structure API.\n\n\n\nAllow's celebrate!\n\nClick me!\n\n\nUsing the Options API.\nConsidering that our company registered the plugin earlier our team presently possess access to the $perks strategy in our elements. $reward coincides as useReward. To acquire the like above we perform:.\n\nAllow's celebrate!\n\nClick me!\n\n\n\n\nProps & config.\nuseReward\/$ reward params:.\nlabel.\nstyle.\nclassification.\ndemanded.\ndefault.\ni.d..\nstrand.\nAn one-of-a-kind id of the aspect you intend to fire from.\nindeed.\n\nkind.\ncord.\n' confetti'.\n' balloons'.\n'em oji'.\ncertainly.\n' confetti'.\nconfig.\nobject.\na setup things described listed below.\nno.\nobserve listed below.\nConfetti config item:.\ntitle.\nstyle.\nclassification.\ndefault.\nlife-time.\namount.\nopportunity of lifestyle.\n200.\nperspective.\nnumber.\nfirst direction of particles in degrees.\n90.\ndegeneration.\nvariety.\nthe amount of the velocity minimizes with each framework.\n0.94.\nspreading.\namount.\nspreading of fragments in degrees.\n45.\nstartVelocity.\nvariety.\ninitial speed of bits.\n35.\nelementCount.\namount.\nbits quantity.\n50.\nelementSize.\namount.\nparticle size in px.\n8.\nzIndex.\nnumber.\nz-index of bits.\n0\nsetting.\ncord.\none of CSSProperties [' posture'] - e.g. \"absolute\".\n\" taken care of\".\nshades.\nstrand [] An assortment of shades used when generating confetti.\n[#A 45BF1', '# 25C6F6', '# 72F753', '#F 76C88', '#F 5F770'] onAnimationComplete.\n() => space.\nA function that works when computer animation finishes.\nundefined.\nBalloons config object:.\nname.\ntype.\ndescription.\ndefault.\nlifetime.\nvariety.\nopportunity of life.\n600.\nviewpoint.\namount.\ninitial path of balloons in degrees.\n90.\ntooth decay.\namount.\nthe amount of the velocity lowers along with each frame.\n0.999.\nspreading.\nvariety.\nescalate of balloons in degrees.\n50.\nstartVelocity.\nnumber.\ninitial velocity of the balloons.\n3.\nelementCount.\nnumber.\nballoons amount.\n10.\nelementSize.\nnumber.\nballoons measurements in px.\nTwenty.\nzIndex.\namount.\nz-index of balloons.\n0\nplacement.\nstring.\nsome of CSSProperties [' position'] - e.g. \"downright\".\n\" fixed\".\ncolors.\nstring [] A selection of shades used when generating balloons.\n[#A 45BF1', '# 25C6F6', '# 72F753', '#F 76C88', '
F 5F770'] onAnimationComplete.() => space.A function that operates when animation completes.boundless.Emoji config item:.label.style.description.default.life time.amount.opportunity of life.200.position.amount.first direction of emoji in degrees.90.tooth decay.number.the amount of the speed minimizes along with each framework.0.94.escalate.amount.escalate of emoji in levels.45.startVelocity.amount.initial speed of emoji.35.elementCount.amount.emoji amount.20.elementSize.amount.emoji size in px.25.zIndex.number.z-index of emoji.0position.cord.some of CSSProperties [' setting'] - e.g. "complete"." repaired".emoji.cord [] A collection of emoji to shoot.onAnimationComplete.() => void.A feature that works when computer animation completes.undefined.