Trying add particles.vue



  • #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>
    
    


  • @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



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



  • working fine, thank you 😘


Log in to reply