loading...
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

banner

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:

Installation

yarn add particles.vue

or

npm install particles.vue

Usage

import Particles from "particles.vue";

Vue.use(Particles);

Demo config

<template>
  <div id="app">
    <Particles
      id="tsparticles"
      :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,
                        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
        }"
    />
  </div>
</template>

TypeScript errors

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

declare module "particles.vue";

Demos

The demo website where you can find other configurations is here

https://particles.matteobruni.it

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

https://codepen.io/collection/DPOage

And a CodeSandbox template to start with:

https://codesandbox.io/s/particlesvue-20-kwsl6

Posted on by:

matteobruni profile

Matteo Bruni

@matteobruni

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.

Discussion

markdown guide