一切正常,但是当我重新加载页面时,我发现错误窗口未定义
我已将其添加到插件中,并且尝试了 ssr:false 和 mode:'client'
我认为问题是 Nuxt 在重新加载页面并使用服务器端渲染代码时没有将配置应用到 Vue。
plugins: [
{ src: '~/plugins/lightbox.js',ssr:false }
],
这是插件文件
// plugins/lightbox.js
import GLightbox from 'glightbox'
import '../node_modules/glightbox/dist/css/glightbox.css'
这是使用 Glightbox 库的单个页面
_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>