tsparticles / vue3-demo

tsParticles Vue.js 3.x demo for YouTube
MIT License
7 stars 0 forks source link

Only bubbles appear #89

Closed yusrenaltair closed 1 year ago

yusrenaltair commented 1 year ago

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
        }"
yusrenaltair commented 1 year ago

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

matteobruni commented 1 year ago

Updated packages to 2.11.1 with the fix