Doesn't work with nuxt.js

[adsellor]

I have been trying to use vue-particles with nuxt.js, but it doesn't work. Found this issue https://github.com/nuxt/nuxt.js/issues/673. Have the same exact errors but cannot fix no matter what.

Nuxt.js Error:

import particles from './vue-particles.vue'
^^^^^^

SyntaxError: Unexpected token import
    at createScript (vm.js:74:10)
    at Object.runInThisContext (vm.js:116:10)
    at Module._compile (module.js:533:28)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
    at Function.Module._load (module.js:458:3)
    at Module.require (module.js:513:17)
    at require (internal/module.js:11:18)
    at r (/home/zaven/Projects/www/node_modules/vue-server-renderer/build.js:5812:16)
    at Object.<anonymous> (webpack:/external "vue-particles":1:0)
    at __webpack_require__ (webpack:/webpack/bootstrap 0c43d74d43f41eb48834:25:0)
    at Object.module.exports.Object.defineProperty.value (server-bundle.js:1542:72)
    at __webpack_require__ (webpack:/webpack/bootstrap 0c43d74d43f41eb48834:25:0)
    at Object.module.exports.__webpack_exports__.a (.nuxt/index.js:27:14)
    at __webpack_require__ (webpack:/webpack/bootstrap 0c43d74d43f41eb48834:25:0)

It seems like @Atinux's PR https://github.com/creotip/vue-particles/commit/a4c290346f029ed61dc4bafa0eb12d60ad09c21a should have fixed the problem, but the error message is still there

[metapragma]

I have the exact same problem.

import particles from './vue-particles.vue'
^^^^^^
SyntaxError: Unexpected token import
    at createScript (vm.js:53:10)
    at Object.runInThisContext (vm.js:95:10)
    at Module._compile (module.js:543:28)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (webpack:/external "vue-particles":1:0)
    at __webpack_require__ (webpack:/webpack/bootstrap 7f7a613301cb2ec9756c:25:0)
    at Object.59 (0.server-bundle.js:121:72)
    at __webpack_require__ (webpack:/webpack/bootstrap 7f7a613301cb2ec9756c:25:0)
    at Object.72 (components/particle.vue:7:0)
    at __webpack_require__ (webpack:/webpack/bootstrap 7f7a613301cb2ec9756c:25:0)

[sobolevn]

The same here.

[creotip]

@adsellor @sobolevn @paerallax

I will check this out ASAP

[jcsho]

Hello friends,

The best way I have found to implement vue-particles with Nuxt JS is to disable server side rendering after implementing it as a plugin.

As mentioned in the nuxt js docs for client-side rendering only.

How to implement:

1. Install vue-particles

2. Create a link to use vue-particles as plugin

plugins/vue-particles.js

import Vue from 'vue'
import VueParticles from 'vue-particles'

Vue.use(VueParticles)

in nuxt.config.js

module.exports = {
  plugins: [
    { src: '~/plugins/vue-particles', ssr: false }
  ]

3. use vue-particles tag

   <vue-particles color="#FFFFFF" />

Hopefully this is a sound solution because this is the first search result on Google. Use the vue-particles tag in your layouts file and the particles will not be re-rendered unless the layout changes.

[fidellr]

@justinhodev its working in layout files, but not in pages, i need tht on my pages and when i added the <vue-particles/>tag inside my page i got this error Cannot read property 'getElementsByClassName' of null. what should i do? thx

[ranlix]

@fidellr change the config options ssr: false:

plugins: [
  { src: '@/plugins/vue-particles', ssr: false }
]

[ezamelczyk]

@liran319 your solution doesn't work. It still throws the same error.

[samuelgoddard]

@liran319 @justinhodev - also not working for me, am i missing something, was this broken in a more recent version? I can get this working in pages but not layouts, and it only renders if i load into the page from a router link

[jordanboston]

I can't get it to work either, not sure what I'm missing. Cannot read property 'getElementsByClassName' of null I can also see it load if I go to another link and then return, but on initial page load or refresh it is not there, and that error persists in the console.

I'm using this in a page since it was not working in the layout. The page is fine, but it needs to load and I'm not sure how to resolve that error.

[Brianvdb]

<no-ssr>
    <vue-particles color="#ffffff"/>
</no-ssr>

@jordanboston @ezamelczyk wrapping it around <no-ssr> tag fixed it.

[samuelgoddard]

@Brianvdb this is also what worked for me in the end

[alexgil1994]

@Brianvdb Yes with and only in layouts ( not in pages or components ) it works but am i the only one who can't use more html code inside the particles tag? For example using :

<vue-particles color='#ffffff'>
   <p>Lorem ipsum</p>
</vue-particles>

does not show the <p> text at all, just shows the particles working normally in the area. Is it working for you? Is there something more that needs to be done so that more html can be inserted in the particles area? I am trying to achieve something simple like in demo page of vue-particles.