Official tsParticles VueJS 3.x component
yarn add @tsparticles/vueimport Particles from "@tsparticles/vue"; createApp(App).use(Particles);<template> <div id="app"> <vue-particles id="tsparticles" :particlesInit="particlesInit" :particlesLoaded="particlesLoaded" url="http://foo.bar/particles.json" /> <vue-particles id="tsparticles" :particlesInit="particlesInit" :particlesLoaded="particlesLoaded" :options="{ background: { color: { value: '#0d47a1' } }, fpsLimit: 120, interactivity: { events: { onClick: { enable: true, mode: 'push' }, onHover: { enable: true, mode: 'repulse' }, resize: true }, modes: { bubble: { distance: 400, duration: 2, opacity: 0.8, size: 40 }, push: { quantity: 4 }, repulse: { distance: 200, duration: 0.4 } } }, particles: { color: { value: '#ffffff' }, links: { color: '#ffffff', distance: 150, enable: true, opacity: 0.5, width: 1 }, move: { direction: 'none', enable: true, outMode: 'bounce', random: false, speed: 6, straight: false }, number: { density: { enable: true, area: 800 }, value: 80 }, opacity: { value: 0.5 }, shape: { type: 'circle' }, size: { random: true, value: 5 } }, detectRetina: true }" /> </div> </template>//import { loadFull } from "tsparticles"; // if you are going to use `loadFull`, install the "tsparticles" package too. import { loadSlim } from "@tsparticles/slim"; // if you are going to use `loadSlim`, install the "@tsparticles/slim" package too. const particlesInit = async engine => { //await loadFull(engine); await loadSlim(engine); }; const particlesLoaded = async container => { console.log("Particles container loaded", container); };If TypeScript returns error while importing/using Particles plugin try adding the following import before the previous code:
declare module "@tsparticles/vue";The demo website is here
There's also a CodePen collection actively maintained and updated here
https://codepen.io/collection/DPOage
If you are migrating your project from Vue 2.x to 3.x you need to these steps:
- Change the dependency from
vue2-particlesto@tsparticles/vue - Update the
node_modulesfolder executingnpm installoryarn - Change the
usefunction fromVue.use(Particles)tocreateApp(App).use(Particles).
The <Particles /> tag syntax remains the same, so you don't need to do any additional action.