npm promulgates marsupials

    vue3-particles
    TypeScript icon, indicating that this package has built-in type declarations

    2.1.4 • Public • Published

    banner

    vue3-particles

    npm npm

    Official tsParticles VueJS 3.x component

    Slack Discord Telegram

    tsParticles Product Hunt

    Installation

    yarn add vue3-particles

    Usage

    import Particles from "vue3-particles";
    
    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,
                                outMode: 'bounce',
                                random: false,
                                speed: 6,
                                straight: false
                            },
                            number: {
                                density: {
                                    enable: true,
                                    area: 800
                                },
                                value: 80
                            },
                            opacity: {
                                value: 0.5
                            },
                            shape: {
                                type: 'circle'
                            },
                            size: {
                                random: true,
                                value: 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 "vue3-particles";

    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 vue2-particles to vue3-particles
    • 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.

    Install

    npm i vue3-particles

    DownloadsWeekly Downloads

    86

    Version

    2.1.4

    License

    MIT

    Unpacked Size

    311 kB

    Total Files

    19

    Last publish

    Collaborators

    • ar3s