tsparticles / vue3-demo

tsParticles Vue.js 3.x demo for YouTube

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Only bubbles appear

yusrenaltair opened this issue · comments

I cloned this repo and ran it locally with nodeJS v18. The result is just bubbles. no links and mouse interaction doesn't work either.
image
are there any steps missing? Thanks in advance.
Update : I tried with node v20, still failed.
I want to add some information here.
this is my config options :

:options="{
            fpsLimit: 60,
            interactivity: {
                events: {
                    onClick: {
                        enable: false,
                        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: '#b3b3b3'
                },
                links: {
                    color: '#b3b3b3',
                    distance: 150,
                    enable: true,
                    opacity: 0.5,
                    width: 1
                },
                collisions: {
                    enable: false
                },
                move: {
                    direction: 'none',
                    enable: true,
                    outMode: 'bounce',
                    random: false,
                    speed: 1,
                    straight: false
                },
                number: {
                    density: {
                        enable: true,
                        area: 800
                    },
                    value: 80
                },
                opacity: {
                    value: 0.5
                },
                shape: {
                    type: 'circle'
                },
                size: {
                    random: true,
                    value: 5
                }
            },
            detectRetina: true
        }"

Here comes the weirdest part.
I have a project using

"dependencies": {
...
"tsparticles": "^2.3.2",
    "vue": "^3.2.37",
    "vue3-particles": "^2.3.2"
...

vue3-particles components run normally, with link and interaction.
but when I upgrade to version 2.11.0, the link disappeared.
and then I go back to the previous version 2.3.2, the link is still missing!
even when I ran npm i right after delete the ./node_modules/ directory
and *.lock file
image
image
and why it always installs version 2.11.0 even though I choose version 2.3.2 in package.json or npm install tsparticles@2.3.2?
what's happening now
image

Updated packages to 2.11.1 with the fix