Develop Reference

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

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

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;

Vue Routing Guard TypeError

I am trying to guard home page and route user to login page if he/she is not signed in.
To do that I made I made router object so that I can use beforeEach() function.
But I get this error:
This error occurs after I try to make a constant object of router.
router.js is:
import Vue from 'vue';
import Router from 'vue-router';
import firebase from 'firebase';
import Home from './views/Home.vue';
import Signup from './components/auth/Signup.vue';
import Login from './components/auth/Login';
Vue.use(Router);
const router = new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/',
name: 'home',
component: Home,
meta: {
requiresAuth: true,
},
},
{
path: '/signup',
name: 'Signup',
component: Signup,
},
{
path: '/login',
name: 'Login',
component: Login,
},
],
});
// router guards
router.beforeEach((to, from, next) => {
// check to see if routh require auth
if (to.matched.some(rec => rec.meta.requiresAuth)) {
// check state of user
const user = firebase.auth().currentUser;
if (user) {
next();
} else {
next({ name: 'Login' });
}
} else {
next();
}
});
This is is in main.js file.
import Vue from 'vue';
import firebase from 'firebase';
import router from './router';
import App from './App.vue';
Vue.config.productionTip = false;
const app = null;
// Wait for firebase init the user
firebase.auth().onAuthStateChanged(() => {
// init the app if not created
if (!app) {
new Vue({
router,
render: h => h(App),
}).$mount('#app');
}
});

Add the below changes
Add this line to last in router.js
export default router;
Add In main.js
import router from './router'; (path should point to your router.js)
new Vue({
router,
....
....
})

MIxins not working in VueJS

I have code:
main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import VueSession from 'vue-session'
import BootstrapVue from 'bootstrap-vue'
import App from './App'
import router from './router'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import AuthHelper from './utils/AuthHelper'
Vue.config.productionTip = false
Vue.use(BootstrapVue)
Vue.use(VueSession)
Vue.mixin(AuthHelper)
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
AuthHelper.js
export default {
methods: {
isLogged () {
if (!this.$session.exists()) {
this.$router.push({
name: 'Login'
})
}
},
logout: () => {
this.$session.destroy()
this.$router.push({
name: 'Login'
})
}
}
}
And my problem is that I can't use method isLogged() in component. Every time I have error that this.isLogged() is not a function.
I am confused, because I do the same as documentation.
#edit
In component I using:
export default {
name: 'Profil',
data () {
return {
user: this.$session.get('user'),
oldpass: '',
newpass: '',
newpassrepeat: '',
error: [],
error2: []
}
},
created () {
this.isLogged()
}
}

Access vuex store in before Vue instance is initialized

I'd like to check if the user is validated before entering routes. I'm using vue-router's beforeEach to tackle this. But I realize that I can check the vuex store before the vue instance is initialized.
Main.js
import Vue from "vue";
import Vuetify from 'vuetify';
import Vuex from 'vuex';
import VueRouter from 'vue-router';
import VeeValidate from 'vee-validate';
import store from '../store/store.js';
import App from '../app.vue';
import axios from 'axios';
import progressBar from '../plugins/progress-bar';
import { routes } from '../router-config';
import { sync } from 'vuex-router-sync';
import 'vuetify/dist/vuetify.min.css'
Vue.use(VeeValidate)
Vue.use(VueRouter)
Vue.use(Vuetify)
Vue.use(Vuex)
Vue.config.productionTip = false
axios.defaults.headers.common['Accept'] = 'application/json'
document.addEventListener('DOMContentLoaded', () => {
document.body.appendChild(document.createElement('app'))
const router = new VueRouter({
routes,
mode: 'hash',
saveScrollPosition: true,
});
sync(store, router)
router.beforeEach((to, from, next) => {
debugger;
if (to.meta.requiresAuth && store.getters.isLoggedIn) {
next({ path: '/' })
} else if (to.path === "/") {
next({ path: '/dashboard'})
} else {
next()
}
});
const app = new Vue({
el: 'app',
router,
store,
axios,
render: h => h(App),
template: '<App/>',
components: {
App,
}
});
})
How can I access this so that I can do something like this this.$store.getters.isLoggedIn? Am I thinking of this the right way?

You don't need this.$store. You have store. Just use store.
store.getters.isLoggedIn
this.$store is just a reference to store that you can use inside Vue components. But anywhere you import the store you have access to everything you need.

Use vue-router in a mixin

I have my main.js set up like the following:
import Vue from 'vue'
import VueRouter from 'vue-router'
import VueResource from 'vue-resource';
Vue.config.productionTip = false;
Vue.use(VueRouter);
Vue.use(VueResource);
Vue.mixin({
methods: {
get_req: function(url) {
Vue.http.get(url, {
before(request) {
// before_callback(request);
}
}).then(response => {
// success_callback(response);
}, response => {
if(response.status == 404) {
Vue.router.push({name: '404'}); // <--- ERROR HERE
}
}).then(response => {
// always_callback(response);
});
}
}
});
const router = new VueRouter({
routes: [
{
path: '/',
component: Home,
meta: {page_title: 'Home'}
},
// ...
]
});
new Vue({
el: '#app',
template: '<App/>',
components: { App },
router: router
});
The error is:
TypeError: Cannot read property 'push' of undefined
So, I know that Vue.router is not defined when I call the mixin method, and I know that a workaround for this is to pass the router itself as argument like something this.get_req(this.$router, 'http://example.com/users/5').
But I trust that there must a better way.

Define your router first, then use it in the mixin.
import Vue from 'vue'
import VueRouter from 'vue-router'
import VueResource from 'vue-resource';
Vue.config.productionTip = false;
Vue.use(VueRouter);
Vue.use(VueResource);
// define the router here
const router = new VueRouter({
routes: [
{
path: '/',
component: Home,
meta: {page_title: 'Home'}
},
// ...
]
});
Vue.mixin({
methods: {
get_req: function(url) {
Vue.http.get(url, {
before(request) {
// before_callback(request);
}
}).then(response => {
// success_callback(response);
}, response => {
if(response.status == 404) {
// Use the router variable you just defined
router.push({name: '404'});
}
}).then(response => {
// always_callback(response);
});
}
}
});
new Vue({
el: '#app',
template: '<App/>',
components: { App },
router: router
});