Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Bug]: particles.vue3 Breaks Vite HMR

See original GitHub issue

Contact Details

No response

What happened?

If I use Particles on the app instance the HMR for Vite breaks. Vite continues to work correctly I can see the hot updates in the command line and the console, but the webpage no longer updates. I have traced it down directly to commenting out app.use(Particles);.

import { createApp } from "vue";
import Particles from "particles.vue3";

const app = createApp(App);
app.use(Particles);

“tsparticles”: “^2.1.3”, “particles.vue3”: “^2.1.3”, “vite”: “^2.9.12”, “@vitejs/plugin-vue”: “^2.3.3”, “vue”: “^3.1.0”,

tsParticles Version

2.1.3

Which library are you using?

Vue.js 3.x (particles.vue3)

tsParticles Configuration

{
    "particles": {
      "number": {
        "value": 150,
        "density": {
          "enable": true,
          "value_area": 1500
        }
      },
      "color": {
        "value": "#66b3ff"
      },
      "shape": {
        "type": "circle"
      },
      "opacity": {
        "value": 0.3,
        "random": false,
        "anim": {
          "enable": false,
          "speed": 1,
          "opacity_min": 0.1,
          "sync": false
        }
      },
      "size": {
        "value": 3,
        "random": true,
        "anim": {
          "enable": false,
          "speed": 40,
          "size_min": 0.1,
          "sync": false
        }
      },
      "line_linked": {
        "enable": true,
        "distance": 150,
        "color": "#66b3ff",
        "opacity": 0.3,
        "width": 1
      },
      "move": {
        "enable": true,
        "speed": 1,
        "direction": "none",
        "random": false,
        "straight": false,
        "out_mode": "out",
        "bounce": false,
        "attract": {
          "enable": false,
          "rotateX": 600,
          "rotateY": 1200
        }
      }
    },
    "interactivity": {
      "detect_on": "canvas",
      "events": {
        "onhover": {
          "enable": true,
          "mode": "grab"
        },
        "onclick": {
          "enable": true,
          "mode": "push"
        },
        "resize": true
      },
      "modes": {
        "grab": {
          "distance": 140,
          "line_linked": {
            "opacity": 1
          }
        },
        "push": {
          "particles_nb": 4
        }
      }
    },
    "retina_detect": true
  }

What browsers are you seeing the problem on?

Firefox, Chrome

Relevant log output

No response

Code of Conduct

I agree to follow this project’s Code of Conduct

Issue Analytics

State:
Created a year ago
Comments:5 (2 by maintainers)

Top GitHub Comments

1reaction

kalenmikecommented, Aug 10, 2022

@matteobruni I put together a small project but the issue is not occuring, so it seems to be related to my specific repo. Thanks for the time, I will look into my repo.

0reactions

kalenmikecommented, Aug 1, 2022

@matteobruni Ok I will try put something together.

Top Results From Across the Web

[Bug]: particles.vue3 slow down with vue-router · Issue #4385

I just start a default project with Vue 3 + Router and then add a Particle on my default ... [Bug]: particles.vue3 Breaks...

vue.js - Vite HMR suddenly reloading full app on every minor ...

After several hours of debugging, it turns out that I had NODE_ENV=production leftover from testing last night.

Migration from v3 - Vite

There are some changes which only affect plugin/tool creators. Also there are other breaking changes which only affect few users. You should migrate...

particles.vue3 - npm

Official tsParticles Vue.js 3.x Component - Easily create highly customizable particle, confetti and fireworks animations and use them as animated ...

A curated list of awesome things related to Vue.js

Vue 3 Shopping Cart - A Shopping cart example using Vue 3, Vite, daisyUI and Pinia. ... Blackjack Break - A quick game...