Unable to save login session in Vue - vue.js

Question

I have a login page that I can login via google, and when I login I get the parameters of the user. The problem is when I refresh the page the parameters are not saved.
This is my code:
export default {
name: "App",
data() {
return {
isLogin: false,
};
},
methods: {
async logOut() {
const result = await this.$gAuth.signOut();
this.isLogin = false;
console.log(`result`, result);
},
async login() {
const googleUser = await this.$gAuth.signIn();
console.log("googleUser", googleUser);
console.log("getId", googleUser.getId());
console.log("getBaseProfile", googleUser.getBasicProfile());
console.log("getAuthResponse", googleUser.getAuthResponse());
console.log(
"getAuthResponse$G",
this.$gAuth.GoogleAuth.currentUser.get().getAuthResponse()
);
this.isLogin = this.$gAuth.isAuthorized;
},
},
};
</script>
As a solution I want to save the session inside a cookie, so I tried to add a dummy cookie to my code, as follow:
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-cookies#1.7.4/vue-cookies.js"></script>
<template>
<div id="app">
<button #click="login()">Login</button>
Is login: ? {{ isLogin }}
<button #click="logOut()">LogOut</button>
</div>
</template>
<script>
// Require dependencies
var Vue = require('vue');
var VueCookie = require('vue-cookie');
// Tell Vue to use the plugin
Vue.use(VueCookie);
// From some method in one of your Vue components
this.$cookie.set('test', 'Hello world!', 1);
// This will set a cookie with the name 'test' and the value 'Hello world!' that expires in one day
// To get the value of a cookie use
this.$cookie.get('test');
// To delete a cookie use
this.$cookie.delete('test');
export default {
name: "App",
data() {
return {
isLogin: false,
};
},
methods: {
async logOut() {
const result = await this.$gAuth.signOut();
this.isLogin = false;
console.log(`result`, result);
},
async login() {
const googleUser = await this.$gAuth.signIn();
console.log("googleUser", googleUser);
console.log("getId", googleUser.getId());
console.log("getBaseProfile", googleUser.getBasicProfile());
console.log("getAuthResponse", googleUser.getAuthResponse());
console.log(
"getAuthResponse$G",
this.$gAuth.GoogleAuth.currentUser.get().getAuthResponse()
);
this.isLogin = this.$gAuth.isAuthorized;
},
},
};
</script>
But I got Uncaught TypeError: Vue.use is not a function.
What am I doing wrong?
Is there a better way to save the login session?

Answer 1

I think you skipped this line:
https://github.com/alfhen/vue-cookie#installation
Or do it the cool way and load it in your main.js/app.js
You should register that VueCookie plugin in the file where you start the Vue instance.
See: https://v2.vuejs.org/v2/guide/plugins.html