0

I have a hard time packaging our components as an npm package so we can reuse them in other projects. I have the feeling I searched everywhere on the internet to no avail. I'm suspecting that using our components in the class syntax style makes most, if not even all, examples fail for me. The final and most successful so far was the one from the Vue documentation However with that one I get an error:

[!] (buble plugin) SyntaxError: Unexpected character '@'

The reason for that is obviously the class syntax with @Component immediately failing the build. Is there a way to make this work with class syntax?

My component's script part looks like this (nothing special on the css and template parts):

<script>
import { Vue, Component, Prop } from 'vue-property-decorator';

@Component
export default class Checkbox extends Vue {
  @Prop({default: false}) checked;

};
</script>
tony19
  • 125,647
  • 18
  • 229
  • 307
jackie.ms
  • 320
  • 2
  • 11

1 Answers1

-1

I think that the problem is with installing vue-loader and vue-template-compiler together.

I'm Quoting Vue-loader Vue Docs

The plugin is required! It is responsible for cloning any other rules you have defined and applying them to the corresponding language blocks in .vue files. For example, if you have a rule matching /\.js$/, it will be applied to <script> blocks in .vue files.

After you npm install them, you need to change your webpack.config.js file like this 

const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  module: {
    rules: [
      // ... other rules
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    // make sure to include the plugin!
    new VueLoaderPlugin()
  ]
}
Dabees
  • 494
  • 4
  • 14
  • If I understand correctly Vue does use Webpack internally. A `vue inspect > output.js` command shows that the `VueLoaderPlugin` is actually included already. I guess that is because we are using the CLI? – jackie.ms Feb 14 '19 at 09:55
  • take a look at this https://stackoverflow.com/questions/42749973/es6-import-using-at-sign-in-path-in-a-vue-js-project-using-webpack – Dabees Feb 14 '19 at 10:07
  • Sorry, but I don't see anything in that question that helps me :-( – jackie.ms Feb 14 '19 at 10:27