Nuxtjs Vue-session - Cannot read property 'exits' of undefined

Question

I want to support Vue-session in Nuxt.js.

I already make a website using Vue.js but it's not good for SEO.

So, I make a new front-end using Nuxt.js. I copy some components from directory Vue.js to Nuxt.js and run.

But it's not working. I received an error in my Header.vue - Login. Here's my code.

TypeError

Cannot read property 'exits' of undefined

https://imgur.com/a/hkccHvL

In Header,vue there is the code here please check it out.

<template>
      <b-navbar sticky toggleable="md" class="navbar-dark bd-navbar" type="dark">
        <b-navbar-toggle target="bd-main-nav" />
        <b-navbar-brand to="/">My Blog</b-navbar-brand>
        <b-collapse
          is-nav
          class="justify-content-between"
          id="bd-main-nav">
          <!-- Right aligned nav items -->
          <b-navbar-nav class="ml-auto">
            <b-nav-item v-if="this.isLoggedIn==true">     
              <span v-show="userName.length > 0" class="align-middle ml-2 text-color">
                {{userName}}
              </span>
              <b-button size="sm" class="my-2 my-sm-0 btn-outline-light btn-space" @click="clickToSignOut">
                Sign out
              </b-button>
            </b-nav-item>
            <b-nav-item v-else>
              <b-button size="sm" class="my-2 my-sm-0 btn-outline-light" 
                @click="this.clickToLogin"
                >Login
              </b-button>
            </b-nav-item>   
          </b-navbar-nav>
        </b-collapse>
      </b-navbar>
    </template>
    <script>
    export default {
        name: 'Header',
        data() {
          return {
            userName:'',
            profileUrl:'',
            isLoggedIn: false
          }
        },
        created() {
          if (this.$session.exits()) {
            let userObject = this.$session.get('loggedInUser')
            this.userName = userObject.name ? userObject.name : ''
            this.profileUrl = userObject.profileUrl ? userObject.profileUrl : ''
            this.isLoggedIn = userObject ? true : false
          } else {
            this.userName = ""
            this.profileUrl = ""
            this.isLoggedIn = false
          }
        },
        methods: {
          clickToLogin() {
            // this.$emit('clickToLogin')
            this.$router.push("Login")
          },
          clickToSignOut() {         
            this.userName = ''
            this.profileUrl = ''
            this.isLoggedIn = false           
            // this.$emit('clickToSignOut')   
            this.$session.destroy()
            this.$router.push('/')
          }, 
        }
    }

In nuxt.config.js

    const pkg = require('./package')


    module.exports = {
      mode: 'universal',
      head: {
        title: pkg.name,
        meta: [
          { charset: 'utf-8' },
          { name: 'viewport', content: 'width=device-width, initial-scale=1' },
          { hid: 'description', name: 'description', content: pkg.description }
        ],
        link: [
          { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
        ],
      },
      loading: { color: '#fff' },
      css: [
      ],
      plugins: [
        '~/plugins/VueSession.js',
        '~/plugins/VeeValidate.js'
      ],
      modules: [,
        // Doc: https://bootstrap-vue.js.org/docs/
        'bootstrap-vue/nuxt'
      ],
      build: {
        extend(config, ctx) {
        }
      }
    }

here is the content of js part please look it out and give me the answer plugins/VueSession.js

import Vue from 'vue'
import VueSession from 'vue-session'
if (process.client) {
  Vue.use(VueSession)
}

Answer 1

You are trying to access VueSession inside created hook, which is fired in the server side, and Your plugin loads only in client side, thats why VueSession is undefined.

Either move the code from created () method to mounted (), as mounted () is executed only in client side, or add if (process.browser) check, to see if its client side.

Alternatively, use nuxt-session (https://www.npmjs.com/package/nuxt-session) which would be Nuxt.js equivalent to the Vue.js plugin.

Hope this helps, cheers!