Vue- Rewards - Vue.js Nourished #.\n\nVue-rewards allows you include micro-interactions to your Vue 3 app, as well as rewards customers along with the rainfall of confetti, emoji or even balloons in secs.\n\nVue 3 merely. Certainly not compatible with Vue 2.\nThis deal is actually a port of react-rewards.\nDemo.\nHere is a simple trial and also below is actually the code for the trial.\nAbout.\nvue-rewards permits you incorporate micro-interactions to your application, and rewards users with the rainfall of confetti, emoji or even balloons in seconds.\nFiring confetti around the page may feel like a doubtful suggestion, however bear in mind that rewarding customers for their actions is certainly not.\nIf a huge cloud of smiling emoji does not suit your use well, attempt transforming the natural science config to make it a lot more refined.\nYou may read more on micro-interactions in my post-- https:\/\/www.thedevelobear.com\/post\/microinteractions\/.\nInstallment.\npnpm set up vue-rewards.\nor even.\nyarn incorporate vue-rewards.\nor even.\nnpm put up vue-rewards.\nIf you consider to utilize this with the Options API then you will definitely need to incorporate the following code to your main.js (or you may locate the plugin sign up in plugins\/index. js):.\nbring in createApp coming from \"vue\".\nbring in App from \".\/ App.vue\".\nimport VueRewards from \"vue-rewards\".\n\/\/ your various other plugins will certainly be imported below.\n\nconst app = createApp( Application).\n\n\/\/ This is the main part.\napp.use( VueRewards).\n\napp.mount(\" #app\").\nUsage.\nIf you want to make use of the benefits, you'll need to offer an aspect that is going to become the origin of the computer animation. This aspect needs to have to possess an i.d. that matches the one made use of - it may be anywhere in the DOM so long as the IDs suit.\nYou can easily put the component inside a button, center it and also shoot up from the button.\nYou can easily position it in addition to the viewport with posture: \"repaired\" and change the angle to 270, to shoot downwards.\nAttempt, practice, have fun!\nComputer animation bits are actually readied to setting: 'repaired' by default, however this may be changed through a config object.\nYou can utilize this package deal in both the make-up API and also the possibilities API.\nUsing the Structure API.\n\n\n\nLet's commemorate!\n\nClick me!\n\n\nMaking Use Of the Options API.\nBecause our company registered the plugin earlier we right now have access to the $perks method in our components. $perks coincides as useReward. To receive the same as over we perform:.\n\nPermit's commemorate!\n\nClick me!\n\n\n\n\nProps & config.\nuseReward\/$ perks params:.\nname.\nstyle.\ndescription.\nneeded.\ndefault.\ni.d..\nstrand.\nAn one-of-a-kind id of the aspect you would like to fire from.\nyes.\n\nstyle.\nstrand.\n' confetti'.\n' balloons'.\n'em oji'.\nyes.\n' confetti'.\nconfig.\nitem.\na configuration item described listed below.\nno.\nobserve listed below.\nConfetti config things:.\ntitle.\ntype.\nclassification.\nnonpayment.\nlife-time.\nnumber.\nopportunity of life.\n200.\nangle.\nvariety.\ninitial instructions of bits in degrees.\n90.\ndecay.\namount.\njust how much the speed lowers with each framework.\n0.94.\nspread.\namount.\nescalate of particles in degrees.\nForty five.\nstartVelocity.\namount.\npreliminary rate of particles.\n35.\nelementCount.\namount.\nbits quantity.\n50.\nelementSize.\nnumber.\nbit measurements in px.\n8.\nzIndex.\nnumber.\nz-index of particles.\n0\nplacement.\ncord.\none of CSSProperties [' placement'] - e.g. \"outright\".\n\" dealt with\".\ncolors.\ncord [] A collection of shades used when creating confetti.\n[#A 45BF1', '# 25C6F6', '# 72F753', '#F 76C88', '#F 5F770'] onAnimationComplete.\n() => gap.\nA function that functions when animation completes.\nboundless.\nBalloons config item:.\nname.\ntype.\nclassification.\nnonpayment.\nlifetime.\nnumber.\nopportunity of lifestyle.\n600.\nangle.\nnumber.\npreliminary direction of balloons in degrees.\n90.\ndecay.\nnumber.\nhow much the speed minimizes with each structure.\n0.999.\nspread.\namount.\nescalate of balloons in levels.\nFifty.\nstartVelocity.\nnumber.\nfirst rate of the balloons.\n3.\nelementCount.\nnumber.\nballoons quantity.\n10.\nelementSize.\nvariety.\nballoons measurements in px.\n20.\nzIndex.\nnumber.\nz-index of balloons.\n0\nsetting.\ncord.\nsome of CSSProperties [' posture'] - e.g. \"complete\".\n\" repaired\".\ncolors.\nstrand [] An assortment of different colors used when generating balloons.\n[#A 45BF1', '# 25C6F6', '# 72F753', '#F 76C88', '
F 5F770'] onAnimationComplete.() => space.A feature that operates when computer animation completes.undefined.Emoji config things:.title.type.description.default.life time.amount.time of lifestyle.200.perspective.variety.first direction of emoji in degrees.90.degeneration.number.just how much the velocity lessens with each framework.0.94.escalate.variety.spread of emoji in levels.Forty five.startVelocity.variety.initial speed of emoji.35.elementCount.number.emoji quantity.Twenty.elementSize.variety.emoji size in px.25.zIndex.amount.z-index of emoji.0setting.cord.some of CSSProperties [' setting'] - e.g. "absolute"." fixed".emoji.string [] An array of emoji to shoot.onAnimationComplete.() => gap.A functionality that runs when animation completes.boundless.