Trying add particles.vue

[zeppelinexpress]

#vue #particles
https://www.npmjs.com/package/particles.vue
I am trying to add particles.vue, what am I doing wrong?
I did yarn add particles.vue
and then
follow my code:

<template>
  <q-layout>
    <q-page-container>
      <q-page padding class="bg-grey-3 flex flex-center">
        <Particles
          id="tsparticles"
          :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>test</div>
      </q-page>
    </q-page-container>
  </q-layout>
</template>

<script>
import Particles from 'particles.vue'
export default {
  name: 'Login',
  components: { Particles }
}
</script>

[dobbel]

@zeppelinexpress

you need a boot file to register the component.

// in the src/boot/particles.js 
import Vue from "Vue";
import Particles from "particles.vue";
 
Vue.use(Particles);

then

add it to boot in quasar.conf

[zeppelinexpress]

thank you, I’ll try it on next week when I go back to work! cheers

[zeppelinexpress]

working fine, thank you