Vue- Incentives - Vue.js Feed #.\n\nVue-rewards lets you add micro-interactions to your Vue 3 application, and incentives consumers with the rain of confetti, emoji or balloons in secs.\n\nVue 3 merely. Not suitable along with Vue 2.\nThis deal is actually a slot of react-rewards.\nDemonstration.\nListed here is actually a basic demonstration as well as listed below's the code for the trial.\nAbout.\nvue-rewards lets you incorporate micro-interactions to your application, and also rewards individuals with the storm of confetti, emoji or even balloons in secs.\nShooting confetti throughout the web page might feel like a dubious tip, yet bear in mind that fulfilling customers for their actions is actually not.\nIf a huge cloud of grinning emoji doesn't match your request effectively, attempt altering the physics config to make it even more subtle.\nYou can easily learn more on micro-interactions in my post-- https:\/\/www.thedevelobear.com\/post\/microinteractions\/.\nInstallation.\npnpm put in vue-rewards.\nor even.\nanecdote incorporate vue-rewards.\nor even.\nnpm put up vue-rewards.\nIf you organize to use this with the Options API then you will definitely need to have to incorporate the complying with code to your main.js (or even you might find the plugin registration in plugins\/index. js):.\nimport createApp from \"vue\".\nimport Application coming from \".\/ App.vue\".\nimport VueRewards coming from \"vue-rewards\".\n\/\/ your other plugins will definitely be imported right here.\n\nconst app = createApp( App).\n\n\/\/ This is the main part.\napp.use( VueRewards).\n\napp.mount(\" #app\").\nUtilization.\nIf you want to utilize the rewards, you'll need to supply an aspect that is going to come to be the origin of the computer animation. This aspect needs to possess an i.d. that matches the one utilized - it may be throughout the DOM as long as the I.d. suit.\nYou can position the element inside a button, facility it as well as skyrocket coming from the switch.\nYou may put it on top of the viewport with placement: \"corrected\" and also modify the perspective to 270, to shoot downwards.\nTry, experiment, enjoy yourself!\nAnimation fragments are set to position: 'dealt with' through default, yet this could be transformed with a config object.\nYou can easily use this plan in both the composition API and also the choices API.\nMaking Use Of the Make-up API.\n\n\n\nLet's commemorate!\n\nClick me!\n\n\nUsing the Options API.\nGiven that our experts signed up the plugin earlier our experts presently possess access to the $reward method in our elements. $reward coincides as useReward. To obtain the like over our company do:.\n\nPermit's commemorate!\n\nClick me!\n\n\n\n\nProps & config.\nuseReward\/$ incentive params:.\nname.\nstyle.\ndescription.\ndemanded.\nnonpayment.\nid.\nstrand.\nAn one-of-a-kind i.d. of the factor you intend to shoot from.\nindeed.\n\nstyle.\ncord.\n' confetti'.\n' balloons'.\n'em oji'.\nindeed.\n' confetti'.\nconfig.\nthings.\na setup object described listed below.\nno.\nfind listed below.\nConfetti config things:.\nlabel.\nkind.\ndescription.\nnonpayment.\nlife-time.\nnumber.\nopportunity of lifestyle.\n200.\nperspective.\nnumber.\npreliminary path of bits in levels.\n90.\ndecay.\nnumber.\nhow much the velocity reduces with each framework.\n0.94.\nspreading.\nvariety.\nspreading of bits in degrees.\nForty five.\nstartVelocity.\namount.\nfirst velocity of particles.\n35.\nelementCount.\namount.\nparticles volume.\nFifty.\nelementSize.\nvariety.\nparticle measurements in px.\n8.\nzIndex.\namount.\nz-index of bits.\n0\nposition.\nstring.\none of CSSProperties [' posture'] - e.g. \"absolute\".\n\" dealt with\".\nshades.\nstrand [] An array of different colors made use of when generating confetti.\n[#A 45BF1', '# 25C6F6', '# 72F753', '#F 76C88', '#F 5F770'] onAnimationComplete.\n() => space.\nA function that runs when animation accomplishes.\nundefined.\nBalloons config things:.\ntitle.\ntype.\nclassification.\nnonpayment.\nlifetime.\nvariety.\ntime of lifestyle.\n600.\nposition.\namount.\npreliminary path of balloons in degrees.\n90.\ndecay.\nvariety.\nthe amount of the rate reduces with each framework.\n0.999.\nescalate.\namount.\nspreading of balloons in degrees.\nFifty.\nstartVelocity.\nnumber.\nfirst velocity of the balloons.\n3.\nelementCount.\namount.\nballoons volume.\n10.\nelementSize.\nnumber.\nballoons size in px.\nTwenty.\nzIndex.\nvariety.\nz-index of balloons.\n0\nplacement.\ncord.\none of CSSProperties [' setting'] - e.g. \"downright\".\n\" corrected\".\nshades.\ncord [] A collection of different colors used when producing balloons.\n[#A 45BF1', '# 25C6F6', '# 72F753', '#F 76C88', '
F 5F770'] onAnimationComplete.() => space.A functionality that works when computer animation accomplishes.boundless.Emoji config object:.label.type.classification.default.lifetime.number.opportunity of lifestyle.200.perspective.variety.initial instructions of emoji in degrees.90.tooth decay.number.how much the velocity lowers with each framework.0.94.spread.variety.escalate of emoji in levels.Forty five.startVelocity.amount.initial speed of emoji.35.elementCount.variety.emoji amount.20.elementSize.variety.emoji measurements in px.25.zIndex.amount.z-index of emoji.0posture.string.among CSSProperties [' setting'] - e.g. "downright"." dealt with".emoji.cord [] A range of emoji to shoot.onAnimationComplete.() => void.A feature that works when computer animation completes.boundless.
Articles You Can Be Interested In