Cover image for How to create particles animations in Vue.js

How to create particles animations in Vue.js

matteobruni profile image Matteo Bruni ・2 min read

So you have seen a cool particles effect in some website and you want one too?

Maybe you don't know what I'm talking about or what particles animations are? Let me show a sample

Still confused? https://codepen.io/collection/DPOage checkout this CodePen collection.

So now you want one too.

If you are using Vue.js you probably found vue-particles but I'm not here to talk about an abandoned project (3 years ago) using an abandoned core library (5 years ago) with issues and bugs.

We need a new library actively maintained: Particles.vue based on a core library actively maintained too: tsParticles

GitHub logo matteobruni / tsparticles

tsParticles - Particles.js on steroids


tsParticles - TypeScript Particles

A lightweight TypeScript library for creating particles. Dependency free (*) and browser ready!

Particles.js converted in TypeScript, dependency free (*), improved with new cool 😎 features and various bugs fixed and it's actively maintained!

jsDelivr Cdnjs npmjs npm lerna CodeFactor Codacy Badge Gitpod Ready-to-Code

Do you want to use it on your website?

This library is available on the two most popular CDNs and it's easy and ready to use, if you were using particles.js it's even easier.

You'll find the instructions below, with all the links you need, and don't be scared by TypeScript, it's just the source language.

The output files are just JavaScript. 🤩

CDNs and npm have all the sources you need in Javascript, a bundle browser ready (tsparticles.min.js) and all files splitted for import syntax.

If you are still interested some lines below there are some instructions for migrating from the old particles.js library.

You can find other tutorials for tsParticles here:

Let's dive into Particles.vue:


yarn add particles.vue


npm install particles.vue


import Particles from "particles.vue";


Demo config

  <div id="app">
            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,
                        speed: 3
                    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

TypeScript errors

If TypeScript returns error while importing/using Particles plugin try adding the following import before the previous code:

declare module "particles.vue";


The demo website where you can find other configurations is here


There's also a CodePen collection actively maintained and updated here


And a CodeSandbox template to start with:


Posted on by:

matteobruni profile

Matteo Bruni


Full Stack Developer, mainly working in .NET with web technologies and mobile (Xamarin). WWDC14 Attendee, when Swift was presented, a bit rusty but can work in Swift too.


markdown guide