I created a simple package named myp
:
nuxt.config.js
{
...[omitted],
plugins: ['~/plugins/sample.js']
}
plugins/sample.js
import HisPlugin from 'myp'
Vue.component('HisPlugin', HisPlugin)
node_modules/myp/package.json
{
...[omitted],
"main": "test.vue"
}
node_modules/myp/test.vue
<template>
<div class="my-plugin">
It works!
</div>
</template>
<style>
.my-plugin {
font-size: 200%;
}
</style>
And the following error message:
C:\Users\Daniel\Desktop\ssrtest\node_modules\myp\test.vue:1
(function (exports, require, module, __filename, __dirname) { <template>
^
SyntaxError: Unexpected token <
at createScript (vm.js:53:10)
at Object.runInThisContext (vm.js:95:10)
at Module._compile (module.js:543:28)
This presumably comes from the server-side renderer, which does not recognize *.vue files. Is it possible to get the server-side renderer to recognize them?
Some libraries export .vue files, and it is the recommended approach by Evan You (https://forum-archive.vuejs.org/topic/1203/how-to-bundle-a-set-of-vue-components-efficiently/4)
<!--cmty--><!--cmty_prevent_hook--><div align="right"><sub><em>This feature request is available on <a href="https://nuxtjs.cmty.io">Nuxt.js</a> community (<a href="https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c1061">#c1061</a>)</em></sub></div>