Home

I developed a plugin called vue-particles and i want it to be Compatible with Nuxt.js.
Tried to read all relevant issues in this repository, but without success.
Lets do it step by step:
Created vue-particles.js file and added this code :

import Vue from 'vue'
import VueParticles from 'vue-particles'
Vue.use(VueParticles)

Then i get this error:

Nuxt.js Error:

/Users/roslanelyashiv/Desktop/VUEJS/nuxt-starter/node_modules/vue-particles/src/vue-particles/index.js:2
import particles from './vue-particles.vue'
^^^^^^
SyntaxError: Unexpected token import
    at Object.exports.runInThisContext (vm.js:76:16)
    at Module._compile (module.js:542:28)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at r (/Users/roslanelyashiv/Desktop/VUEJS/nuxt-starter/node_modules/vue-server-renderer/build.js:6964:16)
    at Object.<anonymous> (webpack:/external "vue-particles":1:0)
    at __webpack_require__ (webpack:/webpack/bootstrap 7eaa50f5c611e7151c2d:25:0)
    at Object.module.exports.Object.defineProperty.value (server-bundle.js:2231:72)
    at __webpack_require__ (webpack:/webpack/bootstrap 7eaa50f5c611e7151c2d:25:0)
    at Object.module.exports.module.exports.list (.nuxt/index.js:88:0)
    at __webpack_require__ (webpack:/webpack/bootstrap 7eaa50f5c611e7151c2d:25:0)
    at Object.<anonymous> (server-bundle.js:1908:65)

So probably node does not recognizing ES2015 syntax?
Tried to change the syntax inside the plugin:

/* eslint-disable */
var particles = require('./vue-particles.vue')

var VueParticles = {

    install (Vue, options) {
        Vue.component('vue-particles', particles)
    }

}
/* eslint-disable */
module.exports.VueParticles = VueParticles;

Then i get this error:

Nuxt.js Error:

/Users/roslanelyashiv/Desktop/VUEJS/nuxt-starter/node_modules/vue-particles/src/vue-particles/vue-particles.vue:1
(function (exports, require, module, __filename, __dirname) { <template>
                                                              ^
SyntaxError: Unexpected token <
    at Object.exports.runInThisContext (vm.js:76:16)
    at Module._compile (module.js:542:28)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/roslanelyashiv/Desktop/VUEJS/nuxt-starter/node_modules/vue-particles/src/vue-particles/index.js:2:17)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)

The problem is with vue file, “template” tag.
Tried to remove

    extend (config, ctx) {
      if (ctx.isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader'
          exclude: /(node_modules)/
        })
      }
    }

No success.