Skip to content

Commit

Permalink
migration: switch to Vue 3 migration build
Browse files Browse the repository at this point in the history
  • Loading branch information
@yyx990803
yyx990803 committed May 5, 2021
1 parent 565b948 commit 14f6f18
Show file tree
Hide file tree
Showing 3 changed files with 209 additions and 1,226 deletions.
6 changes: 4 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,15 @@
},
"dependencies": {
"firebase": "4.6.2",
"vue": "^2.6.12",
"vue": "^3.1.0",
"@vue/compat": "^3.1.0",
"vue-router": "^3.0.0",
"vuex": "^3.0.0",
"vuex-router-sync": "^5.0.0"
},
"devDependencies": {
"vite-plugin-vue2": "^1.4.4",
"@vitejs/plugin-vue": "^1.2.2",
"@vue/compiler-sfc": "^3.1.0",
"stylus": "^0.54.8",
"vite": "^2.2.3"
}
Expand Down
20 changes: 18 additions & 2 deletions vite.config.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,22 @@
import { defineConfig } from 'vite'
import { createVuePlugin } from 'vite-plugin-vue2'
import createVuePlugin from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
plugins: [createVuePlugin()]
resolve: {
alias: {
vue: '@vue/compat'

This comment has been minimized.

Sign in to view

Copy link
@yyx990803

yyx990803 May 6, 2021

Author Member

Alias vue to the migration build (@vue/compat). This is for the runtime.
}
},
plugins: [
createVuePlugin({
template: {
compilerOptions: {
compatConfig: {
MODE: 2

This comment has been minimized.

Sign in to view

Copy link
@yyx990803

yyx990803 May 6, 2021

Author Member

The Vue compiler also needs to explicitly opt-in to compat mode.

Here we are passing the options via @vitejs/plugin-vue. Docs: https://github.com/vitejs/vite/tree/main/packages/plugin-vue#example-for-passing-options-to-vuecompiler-dom

This comment has been minimized.

Sign in to view

Copy link
@y4n6

y4n6 Jan 5, 2024

The Vue compiler also needs to explicitly opt-in to compat mode.

Here we are passing the options via @vitejs/plugin-vue. Docs: https://github.com/vitejs/vite/tree/main/packages/plugin-vue#example-for-passing-options-to-vuecompiler-dom

Maybe the url should be
https://github.com/vitejs/vite-plugin-vue/tree/main/packages/plugin-vue
}
}
}
})
]
})
Loading

1 comment on commit 14f6f18

@yyx990803
Copy link
Member Author

@yyx990803 yyx990803 commented on 14f6f18 May 6, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In this step we are actually swapping Vue 2 to Vue 3 migration build.

The migration build should work with Vue Router 3.x & Vuex 3.x. You will likely see a lot of console warnings but the application should still be able to run.

If you are using vue-cli:

  • update vue version to ^3.1.0
  • install @vue/compat with same version
  • replace vue-template-compiler with @vue/compiler-sfc@^3.1.0

Then configure the alias and compiler options in vue.config.js:

module.exports = {
  chainWebpack: config => {
    config.resolve.alias.set('vue', '@vue/compat')

    config.module
      .rule('vue')
      .use('vue-loader')
      .tap(options => {
        return {
          ...options,
          compilerOptions: {
            compatConfig: {
              MODE: 2
            }
          }
        }
      })
  }
}

Please sign in to comment.