I want those particle effects too!!
Did you see some fancy particles and you want something like that in your Vue.js project?
Let's see how to add them using tsParticles Vue.js 2.x or 3.x components.
Ready to use templates
Are you too lazy to read the post and want some working samples?
Here you are:
Vue JS 2.x (particles.vue)
- Vue 2.x tsParticles demo project
- Vue 2.x tsParticles CodeSandbox sample
- Vue 2.x tsParticles Authentication template
Vue JS 3.x (particles.vue3)
- Vue 3.x tsParticles demo project
- Vue 3.x tsParticles CodeSandbox sample
- Vue 3.x tsParticles Authentication template
Community projects
If you have some cool projects to share or some beautiful samples for newbies feel free to open a PR in the tsParticles templates repository
Let's start with the popular Vue.js 2.x version. The particles.vue npm package.
Vue.js 2.x
Installation
yarn add particles.vue
Usage
import Particles from "particles.vue";
// this adds the particles plugin to Vue.js
Vue.use(Particles);
Demo config
<template>
<div id="app">
<!-- use this tag to add a particle container with an external configuration -->
<Particles
id="tsparticles"
:particlesInit="particlesInit"
:particlesLoaded="particlesLoaded"
url="http://foo.bar/particles.json"
/>
<!-- or -->
<!-- use this tag to add a particle container with an inline configuration -->
<Particles
id="tsparticles"
:particlesInit="particlesInit"
:particlesLoaded="particlesLoaded"
:options="{
background: {
color: {
value: '#0d47a1'
}
},
fpsLimit: 60,
interactivity: {
detectsOn: 'canvas',
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
},
collisions: {
enable: true
},
move: {
direction: 'none',
enable: true,
outMode: 'bounce',
random: false,
speed: 6,
straight: false
},
number: {
density: {
enable: true,
value_area: 800
},
value: 80
},
opacity: {
value: 0.5
},
shape: {
type: 'circle'
},
size: {
random: true,
value: 5
}
},
detectRetina: true
}"
/>
</div>
</template>
TypeScript errors
If you are using TypeScript and you have some errors while importing/using Particles plugin try adding the following import before the previous code:
declare module "particles.vue";
Let's continue with the new Vue.js 3.x version. The particles.vue3 npm package.
Vue.js 3.x
Installation
yarn add particles.vue3
Usage
import Particles from "particles.vue3";
// this will add the particles plugin to your Vue.js app
createApp(App).use(Particles)
Demo config
<template>
<div id="app">
<!-- use this tag to add a particle container with an external configuration -->
<Particles
id="tsparticles"
:particlesInit="particlesInit"
:particlesLoaded="particlesLoaded"
url="http://foo.bar/particles.json"
/>
<!-- or -->
<!-- use this tag to add a particle container with an inline configuration -->
<Particles
id="tsparticles"
:particlesInit="particlesInit"
:particlesLoaded="particlesLoaded"
:options="{
background: {
color: {
value: '#0d47a1'
}
},
fpsLimit: 60,
interactivity: {
detectsOn: 'canvas',
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
},
collisions: {
enable: true
},
move: {
direction: 'none',
enable: true,
outMode: 'bounce',
random: false,
speed: 6,
straight: false
},
number: {
density: {
enable: true,
value_area: 800
},
value: 80
},
opacity: {
value: 0.5
},
shape: {
type: 'circle'
},
size: {
random: true,
value: 5
}
},
detectRetina: true
}"
/>
</div>
</template>
TypeScript errors
If you are using TypeScript and you have some errors while importing/using Particles plugin try adding the following import before the previous code:
declare module "particles.vue3";
Demos
The demo website is here
There's also a CodePen collection actively maintained and updated here
https://codepen.io/collection/DPOage
Related posts
If you like the project and you want to support that please leave a star on GitHub
matteobruni
/
tsparticles
tsParticles - Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.
tsParticles - TypeScript Particles
A lightweight TypeScript library for creating particles. Dependency free (*), browser ready and compatible with React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Riot.js, Solid.js, and Web Components
Table of Contents
-
tsParticles - TypeScript Particles
- Table of Contents
- Do you want to use it on your website?
- Library installation
- Official components for some of the most used frameworks
- Presets
- Templates and Resources
- Demo / Generator
- Video Tutorials
- …
Top comments (3)
Thanks for sharing! I used the particles library back in 2018 when I made my first portfolio. It's such a cool library. Now that I'm getting my hands dirty with Vue, maybe I'll incorporate it in a future project. Bookmarked your post for future reference. Thanks again :)
vue 2 not works dude
I fixed the CodeSandbox, if it's what you were talking about.