I'm trying to switch my Vue app from Vue 2 to Vue 3, using the migration build in order to do this progressively. I've followed points 1 to 3, but when starting my application it seems like my root component is not rendered correctly.
Here is the file initializing the app:
import Vue, {configureCompat} from "vue";
configureCompat({
"MODE": 2
});
new Vue({
"template": "<h1>Hello world!</h1>",
mounted() {
console.log("Mounted");
}
}).$mount("#app");
And the output HTML:
<body>
<div id="app" data-v-app>
<!---->
</div>
</body>
What is strange is that I can see the Mounted log in the console, and if I change import Vue from "vue"; by import Vue from "@vue/compat" it works, but as I understand it this should not be needed since I configured an alias in my Webpack config to make vue point to @vue/compat:
process.env.BABEL_ENV = "renderer";
const path = require("path");
const {VueLoaderPlugin} = require("vue-loader");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const {dependencies} = require("./package.json");
// List of Node modules to include in webpack bundle.
// Required for specific packages like Vue UI libraries that provide pure `.vue` files that need compiling.
const WHITE_LISTED_MODULES = [
"vue"
];
const rendererConfig = {
"target": "electron-renderer",
"mode": (process.env.NODE_ENV === "production") ? "production" : "development",
"entry": {
"renderer": path.join(__dirname, "./src/renderer/index.js")
},
"output": {
"globalObject": "this",
"filename": "[name].js",
"libraryTarget": "commonjs2",
"path": path.join(__dirname, "./dist")
},
"externals": [
...Object.keys(dependencies || {}).filter((d) => !WHITE_LISTED_MODULES.includes(d))
],
"resolve": {
"alias": {
"@": path.join(__dirname, "./src/renderer"),
"vue": "@vue/compat"
},
"extensions": [".js", ".vue"]
},
"node": {
"__dirname": process.env.NODE_ENV !== "production",
"__filename": process.env.NODE_ENV !== "production"
},
"module": {
"rules": [
{
"test": /\.vue$/,
"use": {
"loader": "vue-loader",
"options": {
"compilerOptions": {
"compatConfig": {
"MODE": 2
}
}
}
}
}
]
},
"plugins": [
new VueLoaderPlugin(),
new HtmlWebpackPlugin({
"filename": "index.html",
"template": path.resolve(__dirname, "./src/renderer/index.ejs"),
"nodeModules": (process.env.NODE_ENV === "production") ? false : path.resolve(__dirname, "./node_modules"),
})
]
}
module.exports = rendererConfig;
Am I missing something? Any help would be greatly appreciated!
@alias but it does not change anything. It seems like thevuealias is kind of working becauseconfigureCompatis correctly defined, whereas it is undefined if I remove thevuealias.