This content originally appeared on DEV Community and was authored by t0yohei
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
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
}
This content originally appeared on DEV Community and was authored by t0yohei
t0yohei | Sciencx (2021-06-05T13:19:07+00:00) Webpack settings when upgrading Vue2 to Vue3.1 for Rails application. Retrieved from https://www.scien.cx/2021/06/05/webpack-settings-when-upgrading-vue2-to-vue3-1-for-rails-application/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.