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.
![renovate[bot] avatar](https://avatars.githubusercontent.com/in/2740?v=4 "renovate[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent