Upgrading from Vue 2 to Vue 3 led to a typeError: Vue is not defined as a constructor

Question

Upgrading from Vue 2 to Vue 3 led to a typeError: Vue is not defined as a constructor

I'm in the process of migrating my Vue 2 syntax to Vue 3 and running into an issue with the following error message:

TypeError: Vue is not a constructor.

Here's my current code using Vue 3:

let app;

firebase.auth().onAuthStateChanged(user => {
  console.log("user", user);
  if (!app) {
    app = new Vue({
      router,
      store,
      render: h => h(App)
    }).$mount("#app");
  }
});

To successfully migrate to Vue 3, I need to make the following changes:

import { createApp } from "vue";

const app = createApp({
});

app.mount("#app");

javascript firebase vue.js vuex vuejs3

Answer 1

Answer №1

To make the transition to Vue 3, Vuex 4, and Vue Router 4, you would need to update your code as follows:

import { createApp } from 'vue'
import store from './store'
import router from './router'
import App from './App.vue'

let app;

firebase.auth().onAuthStateChanged(user => {
  console.log("user", user);
  app = createApp(App);
  app.use(store);
  app.use(router);
  app.mount("#app");
});

In store.js, the syntax for creating the store has changed slightly:

import { createStore } from 'vuex'

// now uses `createStore`
export default createStore({ 
  state: {},
  getters: {},
  mutations: {},
  actions: {}
})

For the router configuration in router.js:

import { createWebHistory, createRouter } from "vue-router";
import Home from "@/views/Home.vue";
import About from "@/views/About.vue";

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: "/about",
    name: "About",
    component: About,
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

Answer 2

To make the transition to Vue 3, Vuex 4, and Vue Router 4, you would need to update your code as follows:

import { createApp } from 'vue'
import store from './store'
import router from './router'
import App from './App.vue'

let app;

firebase.auth().onAuthStateChanged(user => {
  console.log("user", user);
  app = createApp(App);
  app.use(store);
  app.use(router);
  app.mount("#app");
});

In store.js, the syntax for creating the store has changed slightly:

import { createStore } from 'vuex'

// now uses `createStore`
export default createStore({ 
  state: {},
  getters: {},
  mutations: {},
  actions: {}
})

For the router configuration in router.js:

import { createWebHistory, createRouter } from "vue-router";
import Home from "@/views/Home.vue";
import About from "@/views/About.vue";

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: "/about",
    name: "About",
    component: About,
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

Upgrading from Vue 2 to Vue 3 led to a typeError: Vue is not defined as a constructor

Answer №1

Similar questions

Can you explain the function of "app.router" in the context of Express.js?

Eliminating Sunday and holiday hours between two specified dates

How can I utilize Handlebars and a JSON API call to effectively transfer data from an array response and display it within a Handlebars modal?

Creating a jQuery countdown script

Interacting with a 3D model using the mouse cursor in a three

Steps for adding a div to a Vue template

I'm having trouble with my Discord app command. Every time I try to use it, I keep getting the error messages "The application did not respond" and "Dispatching MESSAGE_SEND_FAILED." How

Sliding the container with a width adjustment and left margin fails to display all images

Is there a way to stop all currently running JavaScript functions when a Vue component is being destroyed?

Form Validation Using a Separate Function

Send data in JSON format from an AngularJS client to an Express server

Variable declared in $scope suddenly losing its definition

How come my HTML interpolation isn't showing up correctly in Vue.js?

Efficiently organizing dates in the Vuetify date range picker

Display a view with Vue Router based on specific conditions

Leveraging a shared directory within an npm project

What is the best way to create a "comment posting and replying" section on a website using either PHP or Javascript?

The functionality of the `next-auth` signOut button click does not seem to accept a variable as input, although

What is the best way to address a NULL value within a VueJS filter?

Utilizing jQuery to create a blocking modal with a spinning gif, without the need for jQuery Block