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

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

tsParticles - TypeScript Particles

View on GitHub

You can find other tutorials for tsParticles here:

How to use tsParticles

Matteo Bruni for tsParticles ・ Jul 25 '20

#tutorial #javascript #html #showdev

5 reasons to use tsParticles and not Particles.js

Matteo Bruni for tsParticles ・ Mar 13 '20

#javascript #typescript #showdev #tutorial

tsParticles tutorial

Matteo Bruni for tsParticles ・ Jun 10 '20

#typescript #javascript #tutorial #webdev

Let's dive into Particles.vue:

Installation

yarn add particles.vue

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

Blog

How to create particles animations in Vue.js

Matteo Bruni