Adding Vue.js to Sage 9: Dependencies and Approach

sage
11

Updated instructions for buble instead of babel, with vue-style-loader working

The previous solution above was missing vue-style-loader integration, and this one fixes that problem, permitting <style> sections in .vue single-file components.

Thanks to @kellymears for having published https://github.com/pixelcollective/SageJS, which includes these fixes.

Known issue:

In the final main.css, the styles from .vue components are included before the normal scss styles. Now sure how to fix that yet.

1. Add dependencies

yarn add vue

yarn add --dev vue-loader vue-template-compiler eslint-plugin-vue vue-style-loader

2. Add stuff to webpack.config.js

To your webpack.config.js file (found in resources/assets/build/ ), include vue-loader :

const { VueLoaderPlugin } = require('vue-loader')

Add this to module.rules :

      {
        test: /\.vue$/,
        loader: 'vue-loader',
      },

And also insert this in module.rules, right before the other test: /\.css$/ entry, not replacing it:

      {
        test: /\.css$/,
        exclude: config.paths.assets,
        use: [
          { loader: 'vue-style-loader' },
          { loader: 'css-loader' },
        ],
      },

And to force the runtime to include the full compiler (only needed if you want your root Vue element to be parsed as a Vue template), add this under resolve :

    alias: {
      'vue$': 'vue/dist/vue.esm.js'

Now register VueLoaderPlugin under plugins .

    new VueLoaderPlugin(),

I placed mine after the debug watcher plugin (does it even matter?):

    new webpack.LoaderOptionsPlugin({
      minimize: config.enabled.optimize,
      debug: config.enabled.watcher,
      stats: { colors: true },
    }),
    new VueLoaderPlugin(), //here

3. Modify webpack.config.watch.js

Set pathinfo to false to fix “Unexpected token ‘*’” errors while running yarn start

  output: {
    pathinfo: false, // set to false
    publicPath: config.proxyUrl + config.publicPath,
  },

4. Lint .vue files properly

In .eslintrc.js , replace the extends property with:

  "extends": [
    "eslint:recommended",
    "plugin:vue/essential",
  ],

5. Setup a directory for your .vue components

resources/assets/scripts/vue/ seems like a good spot for those .vue components.

See example reference above in the original post.

6. Add the new directory to your watch list in resources/assets/config.json:

Under watch:, add:

    "resources/assets/scripts/vue/**/*.vue"
10 Likes