Natural Performance Manager
    Have ideas to improve npm?Join in the discussion! »

    particles.vue

    2.9.2 • Public • Published

    banner

    particles.vue

    npm npm

    Official tsParticles VueJS component

    Installation

    yarn add particles.vue

    Usage

    import Particles from "particles.vue";
    
    Vue.use(Particles);

    Demo config

    <template>
        <div id="app">
            <Particles
                    id="tsparticles"
                    :particlesInit="particlesInit"
                    :particlesLoaded="particlesLoaded"
                    url="http://foo.bar/particles.json"
            />
    
            <!-- or -->
    
            <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 TypeScript returns error while importing/using Particles plugin try adding the following import before the previous code:

    declare module "particles.vue";

    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

    Install

    npm i particles.vue

    DownloadsWeekly Downloads

    460

    Version

    2.9.2

    License

    MIT

    Unpacked Size

    25.6 kB

    Total Files

    6

    Last publish

    Collaborators

    • avatar