Added Vue3 support #746
Added Vue3 support #746
Conversation
| "vue": "^2.3.4", | ||
| "vue-loader": "^15.0.11", | ||
| "vue": "^3.0.0beta.9", | ||
| "vue-loader": "^16.0.0-alpha.1", |
There was a problem hiding this comment.
With ^2.3.4 || ^3.0.0beta.9, yarn ALWAYS prefers the stable version 2. So, I've added the -beta, -alpha versions only here so that they will install. Then in scripts/force-lowest-dependencies.js, I manually force vue2 and vue-loader 15. It's super hacky - would love if someone knows a way for me to use ^2.3.4 || ^3.0.0beta.9 but tell yarn to install the beta v3.
This PR was squashed before being merged into the master branch. Discussion ---------- [Chore] Updating lock dependencies This doesn't affect end-users. I'm doing this mostly to isolate what test "hash" changes are unique to Vue 3 in #746 and which are just from upgrading dependencies. Commits ------- 03bbd97 removing node_modules cache on appveyor 2020aae bumping to 7.7.0 babel/core to support babel.config.json bf7d18d forcing lock file on appveyor e3deda8 updating test hashes after dependency update f87806a updating dependencies
Problem is that if we say "2 || 3-beta" for vue, yarn always prefers 2 because it's stable. So we have 3-beta in package.json only (and then it installs fine) and force vue2 manually.
And removing redundant id="app" element
I'm not sure why this is happening, but we kind of need to trust that Webpack will be putting files in the correct order
…rn add command
This was causing a test to behave differently before and after 4.22.0
| .hidden { | ||
| visibility: hidden; | ||
| } | ||
| </style> |
There was a problem hiding this comment.
The re-ordering works around a vue-loader bug - which was just merged :) vuejs/vue-loader#1671
| import { createApp } from 'vue'; | ||
| import App from './App' | ||
|
|
||
| createApp(App).mount('#app'); |
There was a problem hiding this comment.
vue2 code is pretty much compat with vue3, except for how you originally render the app. So I have v2 and v3 entry files.
| #app { | ||
| margin-top: 40px; | ||
| } | ||
| </style> |
There was a problem hiding this comment.
Typescript in vue2 vs vue3 is different enough that I have 2 separate directories.
| // useJsx and vue 3 are not currently supported by Encore | ||
| if (this.vueOptions.useJsx && this.vueOptions.version === 3) { | ||
| throw new Error('Setting both "useJsx: true" and "version: 3" for enableVueLoader() is not currently supported. Please use version: 2 or disable useJsx.'); | ||
| } |
There was a problem hiding this comment.
It appears that the babel preset that enables this doesn't work yet - vuejs/jsx-vue2#106
| { name: 'vue' }, | ||
| { name: 'vue-loader', enforce_version: true }, | ||
| { name: 'vue', version: '^2' }, | ||
| { name: 'vue-loader', version: '^15' }, |
There was a problem hiding this comment.
New feature to force what version to show when we recommend something to the user. Causes yarn add vue@^2 to be output.
| @@ -22,7 +22,8 @@ module.exports = function(plugins, webpackConfig) { | |||
| return; | |||
| } | |||
|
|
|||
| const VueLoaderPlugin = require('vue-loader/lib/plugin'); // eslint-disable-line | |||
| const { VueLoaderPlugin } = require('vue-loader'); // eslint-disable-line node/no-unpublished-require | |||
There was a problem hiding this comment.
Works on both versions of vue-loader - we always should have done this ;)
| @@ -46,7 +46,7 @@ | |||
| "style-loader": "^1.1.3", | |||
| "terser-webpack-plugin": "^1.1.0", | |||
| "tmp": "^0.0.33", | |||
| "webpack": "^4.20.0", | |||
| "webpack": "^4.22.0", | |||
There was a problem hiding this comment.
Fixes a change in how some 0.js and 1.js split files are rendered - a fix was introduced in 4.22.0.
|
This is ready to go! |
Hi!
Vue3 is now beta. I think Encore should support Vue2 and Vue 3... at least for awhile. The changes needed to make Webpack work with v3 are not that many:
vue/compiler-sfcinstead ofvue-template-compilerVueLoaderPluginin a slightly different wayYou can choose the version with a new
versionoption toenableVue():Otherwise, it will configure itself correctly if you have vue2 or vue3 installed, or it will (finally) recommend the vue2 install instructions. When v3 comes out, we would change the default recommendation to be v3.