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.
<!--cmty--><!--cmty_prevent_hook--><div align="right"><sub><em>This question is available on <a href="https://nuxtjs.cmty.io">Nuxt.js</a> community (<a href="https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c583">#c583</a>)</em></sub></div>