Migrating Vue 2 to Vue 3, typeError: Vue is not a constructor

user_11489425 0
Viewed 1043

How can I migrate my Vue 2 syntax to Vue 3, because I'm receiving the following error:

TypeError: Vue is not a constructor.

Right now I'm 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

import { createApp } from "vue";

const app = createApp({
});

app.mount("#app");
vuejs3 firebase vuex vue.js javascript
1 Answers

The equivalent of your code in Vue 3, Vuex 4, Vue Router 4 would be something like:

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

The store syntax is slightly different in store.js:

import { createStore } from 'vuex'

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

And the router 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;
user_21850930
Related