Home » vue » Component not rendered with Vue compat

Component not rendered with Vue compat

Posted by: admin November 26, 2021 Leave a comment


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";

    "MODE": 2

new Vue({
    "template": "<h1>Hello world!</h1>",
    mounted() {

And the output HTML:

    <div id="app" data-v-app>

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 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!


The fix was to change in resolve.alias:

"vue": "@vue/compat"


"vue": "@vue/compat/dist/vue.esm-bundler.js"