DEV Community

loading...
Cover image for How to create beautiful particles effect in Vue.js (2.x and 3.x)

How to create beautiful particles effect in Vue.js (2.x and 3.x)

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.
・3 min read

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 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 JS 3.x (particles.vue3)

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


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

Vue.js 2.x

Installation

yarn add particles.vue
Enter fullscreen mode Exit fullscreen mode

Usage

import Particles from "particles.vue";

// this adds the particles plugin to Vue.js
Vue.use(Particles);
Enter fullscreen mode Exit fullscreen mode

Demo config

<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>
Enter fullscreen mode Exit fullscreen mode

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:

declare module "particles.vue";
Enter fullscreen mode Exit fullscreen mode

Let's continue with the new Vue.js 3.x version. The particles.vue3 npm package.

Vue.js 3.x

Installation

yarn add particles.vue3
Enter fullscreen mode Exit fullscreen mode

Usage

import Particles from "particles.vue3";

// this will add the particles plugin to your Vue.js app
createApp(App).use(Particles)
Enter fullscreen mode Exit fullscreen mode

Demo config

<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>
Enter fullscreen mode Exit fullscreen mode

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:

declare module "particles.vue3";
Enter fullscreen mode Exit fullscreen mode

Demos

The demo website is here

https://particles.js.org

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

https://codepen.io/collection/DPOage

Related posts


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

GitHub logo matteobruni / tsparticles

tsParticles - Easily create highly customizable particles animations and use them as animated backgrounds for your website. Ready to use components available for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno.

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 Run on Repl.it

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…

Discussion (3)

Collapse
jasonf profile image
Jason F

Thanks for sharing! I used the particles library back in 2018 when I made my first portfolio. It's such a cool library. Now that I'm getting my hands dirty with Vue, maybe I'll incorporate it in a future project. Bookmarked your post for future reference. Thanks again :)

Collapse
abdullahdickys profile image
abdullahdickys

vue 2 not works dude

Collapse
matteobruni profile image
Matteo Bruni Author

I fixed the CodeSandbox, if it's what you were talking about.

Forem Open with the Forem app