ParticlesJS is not defined

[ghost]

Hello, I've been trying to get particles js to work with vuepress. On my config I have:

head: [
    ['script', {src: 'https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js'}]
]

It works when I run vuepress dev but as soon as I try to build with vuepress build I get the error saying ParticlesJS is not defined even though it is there and working.

[ghost]

Actually have another problem with running scripts on VuePress. I made a vue file called Scripts.vue, then on the home page I do <Scripts/>, it loads everything, but when I click on a link to go to the docs and come back to the home page, the scripts no longer work there.

[ghost]

https://imgur.com/4oXOKNC

[flozero]

Hello @EarlyPacker ! Do you have some repo link we can work on ?

[ghost]

Hello! @f3ltron I pushed this repo with exactly how I have it, works on the dev but can't build. https://github.com/EarlyPacker/TestRepositoryVue

[flozero]

ok i will have a look next week. This weekend i have no free time

[ulivz]

If you have some scripts which rely on the loading script, it actually means that you are accessing window, which will offend the Browser API Access Restrictions

For solving your problem, you should install it at your project and externalize it:

yarn add particles.js -S

// .vuepress/config.js
module.exports = {
   chainWebpack(config) {
      config.externals({
         'particles.js': 'ParticlesJS'
      })
   }
}

In you client code, you should using es import instead of window.ParticlesJS:

import ParticlesJS from 'particles.js'

[lindelof]

First I recommend you use this library, https://github.com/lindelof/particles-bg-vue.

Then the problem you mentioned is solved here https://github.com/nordicgiant2/vue-nice-homepage/blob/master/docs/.vuepress/components/Homepage.vue