Home

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)