Integrate ParticlesJs into a view component

I want to integrate ParticlesJs into my landing page. So only my home view should use this particles configuration and render particles.

I created a snippet and added the ParticlesJs dependencies

https://codesandbox.io/s/ol2rnrlxxq

Two problems come up:

• I added the ParticlesJs file to the sandbox but the function particlesJS is not defined
• I still want to have the content wrapped by v-layout in the center of the screen. How can I keep it? I wrapped the view with v-content because I think I have to add <div id="particles-js"></div> on top level of the component

The final result should look like this.

I added the flat attribute to the card so fixing the two problems should make it work.

You have to put your particlesJS initialize code in mounted hook instead of created. Because in created hook, DOM elements does not created yet. Please see more about mounted.

export default {
  mounted () {
    particlesJS("particles-js", {
      ...
    })
  }
}

To make particles-js fullscreen:

#particles-js {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: pink;
}

To make your layout center (from Layout grid system example):

<v-layout align-center justify-center row fill-height/>

codesandbox.io