How to create beautiful particles effect in Vue.js (2.x and 3.x)
Tags: vue, javascript, tutorial, webdev
Published: 2021-04-29 14:17:00

# 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](https://github.com/matteobruni/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](https://github.com/matteobruni/tsparticles/tree/master/demo/vue)
- [Vue 2.x tsParticles CodeSandbox sample](https://codesandbox.io/s/particlesvue-20-kwsl6)
- [Vue 2.x tsParticles Authentication template](https://github.com/tsparticles/vue-auth-template)

### Vue JS 3.x (`particles.vue3`)

- [Vue 3.x tsParticles demo project](https://github.com/matteobruni/tsparticles/tree/master/demo/vue3)
- [Vue 3.x tsParticles CodeSandbox sample](https://codesandbox.io/s/particlesvue3-68246)
- [Vue 3.x tsParticles Authentication template](https://github.com/tsparticles/vue3-auth-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](https://github.com/tsparticles/templates)

---

Let's start with the popular Vue.js 2.x version. The `particles.vue` npm package.

## Vue.js 2.x

### Installation

``` shell
yarn add particles.vue
```

### Usage

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

// this adds the particles plugin to Vue.js
Vue.use(Particles);
```

#### Demo config

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

``` javascript
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

``` shell
yarn add particles.vue3
```

### Usage

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

// this will add the particles plugin to your Vue.js app
createApp(App).use(Particles)
```

#### Demo config

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

``` javascript
declare module "particles.vue3";
```

### Demos

The demo website is [here](https://particles.js.org)

<https://particles.js.org>

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

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

## Related posts

{% link https://dev.to/matteobruni/how-to-create-beautiful-confetti-animations-with-tsparticles-193 %}
{% link https://dev.to/matteobruni/particles-vue3-released-particles-animations-for-vue-js-3-x-51ia %}
{% link https://dev.to/matteobruni/how-to-create-particles-animations-in-vue-js-1ebi %}
{% link https://dev.to/matteobruni/how-to-use-tsparticles-52k %}
{% link https://dev.to/matteobruni/tsparticles-tutorial-2mbb %}
{% link https://dev.to/matteobruni/5-reasons-to-use-tsparticles-and-not-particles-js-1gbe %}
{% link https://dev.to/matteobruni/migrating-from-particles-js-to-tsparticles-2a6m %}

---

If you like the project and you want to support that please leave a star on GitHub

{% github matteobruni/tsparticles %}