🌜
🌞
particles.vue3

particles.vue3

v2.1.4

Official tsParticles Vue.js 3.x Component - Easily create highly customizable particle animations and use them as animated backgrounds for your website. Ready to use components available also for Web Components, React, Vue.js 2.x, Angular, Svelte, jQuery,

npm install particles.vue3

README

banner

particles.vue3

npm npm

Official tsParticles VueJS 3.x component

Slack Discord Telegram

tsParticles Product Hunt particles.vue3

Installation

yarn add particles.vue3

Usage

import Particles from "particles.vue3";

createApp(App).use(Particles)

Demo config


<template>
    <div id="app">
        <Particles
                id="tsparticles"
                :particlesInit="particlesInit"
                :particlesLoaded="particlesLoaded"
                url="http://foo.bar/particles.json"
        />

        <Particles
                id="tsparticles"
                :particlesInit="particlesInit"
                :particlesLoaded="particlesLoaded"
                :options="{
                    background: {
                        color: {
                            value: '#0d47a1'
                        }
                    },
                    fpsLimit: 120,
                    interactivity: {
                        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,
                            outModes: {
                                default: 'bounce'
                            },
                            random: false,
                            speed: 6,
                            straight: false
                        },
                        number: {
                            density: {
                                enable: true,
                                area: 800
                            },
                            value: 80
                        },
                        opacity: {
                            value: 0.5
                        },
                        shape: {
                            type: 'circle'
                        },
                        size: {
                            value: { min: 1, max: 5 },
                        }
                    },
                    detectRetina: true
                }"
        />
    </div>
</template>
import { loadFull } from "tsparticles";

const particlesInit = async (engine) => {
    await loadFull(engine);
}

const particlesLoaded = async (container) => {
    console.log("Particles container loaded", container);
}

TypeScript errors

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

declare module "particles.vue3";

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

Migrating from Vue 2.x to Vue 3.x

If you are migrating your project from Vue 2.x to 3.x you need to these steps:

  • Change the dependency from particles.vue to particles.vue3
  • Update the node_modules folder executing npm install or yarn
  • Change the use function from Vue.use(Particles) to createApp(App).use(Particles).

The <Particles /> tag syntax remains the same, so you don't need to do any additional action.

General

License
MIT
Typescript Types
Built-in
Tree-shakeable
Yes

Popularity

GitHub Stargazers
4,032
Community Interest
2,895
Number of Forks
472

Maintenance

Commits
10/219/2201,500
Last Commit
Open Issues
15
Closed Issues
313
Open Pull Requests
7
Closed Pull Requests
312

Versions

Versions Released
10/219/22015
Latest Version Released
Jul 28, 2022
Current Tags
latest2.1.4
beta2.0.0-beta.4
next2.0.4
alpha2.0.0-alpha.7

Contributors

matteobruni
matteobruni
Commits: 2,835
VincentGarreau
VincentGarreau
Commits: 624
Wufe
Wufe
Commits: 198
roslaneshellanoo
roslaneshellanoo
Commits: 72
renovate-bot
renovate-bot
Commits: 59
progers
progers
Commits: 57
PieceMaker
PieceMaker
Commits: 52
code-factor
code-factor
Commits: 26
TylerBurnett
TylerBurnett
Commits: 19
Himanshunitrr
Himanshunitrr
Commits: 15
SidiBecker
SidiBecker
Commits: 13
matteoums
matteoums
Commits: 10
Enhmunh-E
Enhmunh-E
Commits: 9
gabrielbarker
gabrielbarker
Commits: 7
gaurang7goel
gaurang7goel
Commits: 6