Webpack options to use vue2 front-end components in ApostropheCMS

index.js

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

module.exports = {
  // When not in production, refresh the page on restart
  options: {
    refreshOnRestart: true
  },
  webpack: {
    extensions: {
      addVue: {
        module: {
          rules: [
            {
              test: /\.vue$/,
              loader: 'vue-loader',
              options: {
                sourceMap: true
              }
            }
          ]
        },
        plugins: [
          // make sure to include the plugin for the magic
          new VueLoaderPlugin()
        ],
        resolveLoader: {
          extensions: [ '.vue' ]
        },
        resolve: {
          extensions: [ '.vue' ],
          alias: {
            vue$: 'vue/dist/vue.runtime.esm.js',
            // This alias can be pointed where you want
            // Or you can choose to have component files in your module
            // `ui/src` folders
            Components: path.join(process.cwd(), 'lib/components')
          }
        }
      }
    }
  }
};