How to create particles animations in Vue.js
Tags: vue, javascript, tutorial, showdev
Published: 2020-08-06 08:38:00

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

{% codepen https://codepen.io/matteobruni/pen/gOajEQW %}

{% codesandbox blissful-http-keiw6 %}

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](https://github.com/matteobruni/tsparticles/blob/master/components/vue/README.md) based on a core library actively maintained too: [tsParticles](https://github.com/matteobruni/tsparticles)

{% github https://github.com/matteobruni/tsparticles %}

You can find other tutorials for `tsParticles` here:

{% link https://dev.to/matteobruni/how-to-use-tsparticles-52k %}

{% link https://dev.to/matteobruni/5-reasons-to-use-tsparticles-and-not-particles-js-1gbe %}

{% link https://dev.to/matteobruni/tsparticles-tutorial-2mbb %}

Let's dive into `Particles.vue`:

## Installation

```
yarn add particles.vue
```

or

```
npm install particles.vue
```

## Usage

```javascript
import Particles from "particles.vue";

Vue.use(Particles);
```

### Demo config

```html
<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:

```typescript
declare module "particles.vue";
```

## Demos

The demo website where you can find other configurations is [here](https://particles.matteobruni.it)

<https://particles.matteobruni.it>

There's also a CodePen collection actively maintained and updated [here](https://codepen.io/collection/DPOage)

<https://codepen.io/collection/DPOage>

And a CodeSandbox template to start with:

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