Package Exports

@tsparticles/vue3
@tsparticles/vue3/dist/particles.es.js
@tsparticles/vue3/dist/particles.umd.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@tsparticles/vue3) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@tsparticles/vue3

Official tsParticles VueJS 3.x component

Installation

yarn add @tsparticles/vue3

Usage

import Particles from "@tsparticles/vue3";
//import { loadFull } from "tsparticles"; // if you are going to use `loadFull`, install the "tsparticles" package too.
import { loadSlim } from "tsparticles-slim"; // if you are going to use `loadSlim`, install the "tsparticles-slim" package too.

createApp(App).use(Particles, {
    init: async engine => {
        // await loadFull(engine); // you can load the full tsParticles library from "tsparticles" if you need it
        await loadSlim(engine); // or you can load the slim version from "tsparticles-slim" if don't need Shapes or Animations
    },
});

Demo config

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

        <vue-particles
            id="tsparticles"
            :particlesLoaded="particlesLoaded"
            :options="{
                    background: {
                        color: {
                            value: '#0d47a1'
                        }
                    },
                    fpsLimit: 120,
                    interactivity: {
                        events: {
                            onClick: {
                                enable: true,
                                mode: 'push'
                            },
                            onHover: {
                                enable: true,
                                mode: 'repulse'
                            },
                        },
                        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
                        },
                        move: {
                            direction: 'none',
                            enable: true,
                            outModes: 'bounce',
                            random: false,
                            speed: 6,
                            straight: false
                        },
                        number: {
                            density: {
                                enable: true,
                            },
                            value: 80
                        },
                        opacity: {
                            value: 0.5
                        },
                        shape: {
                            type: 'circle'
                        },
                        size: {
                            value: { min: 1, max: 5 }
                        }
                    },
                    detectRetina: true
                }"
        />
    </div>
</template>

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 "@tsparticles/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 @tsparticles/vue2 to @tsparticles/vue3
Update the node_modules folder executing npm install or yarn
Change the use function from Vue.use(Particles, { init: /* omissis */ }) to createApp(App).use(Particles, { init: /* omissis */ }).

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