Vue- Rewards - Vue.js Supplied #.\n\nVue-rewards lets you incorporate micro-interactions to your Vue 3 application, and benefits individuals with the rain of confetti, emoji or even balloons in few seconds.\n\nVue 3 merely. Certainly not suitable with Vue 2.\nThis deal is a port of react-rewards.\nTrial.\nListed below is actually an easy trial and listed here is actually the code for the trial.\nApproximately.\nvue-rewards allows you include micro-interactions to your application, and rewards consumers with the rainfall of confetti, emoji or balloons in seconds.\nFiring confetti all over the webpage might seem like a doubtful concept, however remember that worthwhile consumers for their actions is not.\nIf a substantial cloud of smiling emoji doesn't match your application well, choose changing the physics config to make it a lot more subtle.\nYou can easily learn more on micro-interactions in my post-- https:\/\/www.thedevelobear.com\/post\/microinteractions\/.\nInstallation.\npnpm mount vue-rewards.\nor.\nyarn include vue-rewards.\nor.\nnpm put in vue-rewards.\nIf you organize to use this with the Options API at that point you are going to need to have to include the adhering to code to your main.js (or even you might locate the plugin enrollment in plugins\/index. js):.\nbring in createApp from \"vue\".\nimport Application coming from \".\/ App.vue\".\nbring in VueRewards from \"vue-rewards\".\n\/\/ your other plugins are going to be actually imported below.\n\nconst application = createApp( Application).\n\n\/\/ This is actually the almost all.\napp.use( VueRewards).\n\napp.mount(\" #app\").\nUsage.\nIn order to use the perks, you'll require to offer an aspect that will end up being the origin of the computer animation. This factor requires to have an i.d. that matches the one used - it could be throughout the DOM so long as the IDs suit.\nYou can position the element inside a button, facility it and also soar from the button.\nYou may position it on top of the viewport along with setting: \"repaired\" as well as modify the viewpoint to 270, to shoot downwards.\nMake an effort, practice, have a good time!\nAnimation fragments are actually readied to posture: 'fixed' by nonpayment, however this can be changed via a config things.\nYou may utilize this bundle in both the make-up API and the alternatives API.\nUtilizing the Make-up API.\n\n\n\nLet's commemorate!\n\nClick me!\n\n\nUtilizing the Options API.\nConsidering that our company enrolled the plugin earlier our team presently have access to the $incentive procedure in our components. $reward is the same as useReward. To acquire the like over our company perform:.\n\nLet's celebrate!\n\nHit me!\n\n\n\n\nProps & config.\nuseReward\/$ incentive params:.\nlabel.\ntype.\nclassification.\nneeded.\nnonpayment.\ni.d..\ncord.\nAn one-of-a-kind id of the element you intend to shoot coming from.\nof course.\n\ntype.\ncord.\n' confetti'.\n' balloons'.\n'em oji'.\nyes.\n' confetti'.\nconfig.\nitem.\nan arrangement things defined listed below.\nno.\nobserve below.\nConfetti config things:.\ntitle.\nstyle.\ndescription.\nnonpayment.\nlifetime.\namount.\ntime of lifestyle.\n200.\nviewpoint.\nnumber.\npreliminary direction of fragments in degrees.\n90.\ntooth decay.\namount.\njust how much the velocity minimizes with each structure.\n0.94.\nescalate.\namount.\nescalate of fragments in levels.\n45.\nstartVelocity.\nvariety.\npreliminary rate of particles.\n35.\nelementCount.\nnumber.\nfragments quantity.\nFifty.\nelementSize.\namount.\nparticle measurements in px.\n8.\nzIndex.\nvariety.\nz-index of particles.\n0\nposition.\nstring.\none of CSSProperties [' setting'] - e.g. \"outright\".\n\" repaired\".\ncolors.\nstring [] A selection of shades made use of when generating confetti.\n[#A 45BF1', '# 25C6F6', '# 72F753', '#F 76C88', '#F 5F770'] onAnimationComplete.\n() => space.\nA function that functions when computer animation accomplishes.\nundefined.\nBalloons config item:.\nname.\ntype.\nclassification.\nnonpayment.\nlife time.\nvariety.\nopportunity of life.\n600.\nposition.\nnumber.\nfirst instructions of balloons in degrees.\n90.\ndegeneration.\nvariety.\nthe amount of the speed reduces with each frame.\n0.999.\nspread.\nvariety.\nspreading of balloons in degrees.\nFifty.\nstartVelocity.\namount.\nfirst speed of the balloons.\n3.\nelementCount.\nvariety.\nballoons volume.\n10.\nelementSize.\nvariety.\nballoons measurements in px.\nTwenty.\nzIndex.\nnumber.\nz-index of balloons.\n0\nposition.\nstrand.\none of CSSProperties [' position'] - e.g. \"absolute\".\n\" taken care of\".\nshades.\ncord [] A variety of different colors utilized when creating balloons.\n[#A 45BF1', '# 25C6F6', '# 72F753', '#F 76C88', '
F 5F770'] onAnimationComplete.() => void.A feature that runs when computer animation completes.undefined.Emoji config object:.name.type.description.nonpayment.life-time.variety.time of life.200.angle.number.initial instructions of emoji in levels.90.tooth decay.amount.the amount of the speed reduces along with each structure.0.94.escalate.variety.spreading of emoji in levels.45.startVelocity.amount.first speed of emoji.35.elementCount.amount.emoji quantity.20.elementSize.number.emoji measurements in px.25.zIndex.number.z-index of emoji.0position.cord.among CSSProperties [' setting'] - e.g. "absolute"." taken care of".emoji.strand [] An assortment of emoji to fire.onAnimationComplete.() => space.A functionality that functions when animation accomplishes.boundless.