Nuxt error window is not defined when refreshing the page

Question

Everything works fine but when i reload the page i get the error window is not defined

I have added it to plugins and I have tried both ssr:false and mode:'client'

I think the problem is Nuxt doesn't apply the config to the Vue when reloading the page and use the server side to render the code.

  plugins: [
    { src: '~/plugins/lightbox.js', ssr:false }
  ],

this is the plugin file

// plugins/lightbox.js
import GLightbox from 'glightbox'
import '../node_modules/glightbox/dist/css/glightbox.css'

this is a single page that is using the Glightbox library

_post.vue

<template>
<div class="main">
    <div class="wrapper">
        <div class="container">
            <h2 class="heading">{{ data.title }}</h2>
            <p>{{ data.description }}</p>
        </div>
        <div>
            <div class="gallery">
            <div v-for="item in data.images" :key="item.id">
                <!-- <img class="image" :src="item.image" alt=""> -->
                <a @mouseenter.prevent="setLightBox" :href="item.image" class="glightbox">
                    <figure>
                    <img :src="item.image" class="image">
                    </figure>
                </a>
            </div>
            
        </div>
        </div>
    </div>
</div>
</template>

<script>

import GLightbox from 'glightbox'

export default {
    // transition:'slide-fade',
    async asyncData({ $axios, params }) {
    const data = await $axios.$get(`api/v1/projects/${params.post}`)
    console.log(data)
    return { data }
  },
  data(){
      return {
          lightbox: ''
      }
  },
  methods: {
      setLightBox(){
            this.lightbox = GLightbox({
                touchNavigation: true,
                loop: false,
            })
        },
        toggleLightBox(){
            this.lightbox.open()
        }
  }
}
</script>