Webpack settings when upgrading Vue2 to Vue3.1 for Rails application

t0yohei — Sat, 05 Jun 2021 13:19:07 +0000

This is the setting content that corresponds to 3 of the article below.

vue-next/packages/vue-compat at master · vuejs/vue-next · GitHub

The content is based on the assumption that you are using the webpacker v5 system.
Also, at the time of writing the article, I am using the beta of Vue 3.1.0.

Version

rails: 6.1.3.2
webpacker: 5.4.0
vue: 3.1.0-beta.7
@vue/compat: 3.1.0-beta.1
vue-loader: 16.2.0

Preparation

Besed on the content of vue-next/packages/vue-compat at master · vuejs/vue-next · GitHub, we will update vue-loader to ^16.0.0 and vue, @vue/compat to the 3.1 series.

Modify package.json as shown below and run yarn install or npm install.

  "dependencies": {
    "vue": "^3.1.0-0",
    "@vue/compat": "^3.1.0-0",
    "vue-loader": "^16.0.0",
    ...
  },

Modify webpack settings

Modify config/webpack/loaders/vue.js and config/webpack /environment.js as follows (if config/webpack/loaders/vue.js has not been created, create a new one).

config/webpack/loaders/vue.js

module.exports = {
  test: /\.vue(\.erb)?$/,
  use: [{
    loader: 'vue-loader',
    options: {
      compilerOptions: {
        compatConfig: {
          MODE: 2,
        },
      },
    },
  }],
};

config/webpack/environment.js

const { environment } = require('@rails/webpacker');
const { VueLoaderPlugin } = require('vue-loader');
const vue = require('./loaders/vue');

environment.config.merge({
  resolve: {
    alias: {
      vue: '@vue/compat',
    },
  },
});

environment.plugins.prepend('VueLoaderPlugin', new VueLoaderPlugin());
environment.loaders.prepend('vue', vue);
module.exports = environment;

Sample commit: Update vue to 3 1 by t0yohei · Pull Request #70 · t0yohei/rails-vue-app · GitHub

Confirmation of operation

If the settings are correct, when you run bin/webpack or bin/webpacker-dev-server, you will get warnings and errors like the attached image.

Next To Do

After changing the settings of the webpack, it will be a task to crush the warnings and errors that appear in the build.

For the subsequent work, refer to 4 and later below.
vue-next/packages/vue-compat at master · vuejs/vue-next · GitHub