-
-
Notifications
You must be signed in to change notification settings - Fork 198
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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-sfc
instead ofvue-template-compiler
VueLoaderPlugin
in a slightly different wayYou can choose the version with a new
version
option 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.