DEV Community

loading...

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

t0yohei
Web Developer
・2 min read

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",
    ...
  },
Enter fullscreen mode Exit fullscreen mode

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,
        },
      },
    },
  }],
};
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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.

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

When all the work is completed successfully, the migration to Vue 3.1 is complete.

Appendix: If you have TypeScript installed

If you want to get type support from the implementation of import Vue from'vue', it seems that you need the following settings in shim.d.ts.

declare module 'vue' {
  import { CompatVue } from '@vue/runtime-dom'
  const Vue: CompatVue
  export default Vue
}
Enter fullscreen mode Exit fullscreen mode

Discussion (0)

Forem Open with the Forem app