Nuxt导入vue-collage-slideshow报document is not defined错误如何解决？

报错原因 #

你遇到的document is not defined错误是Nuxt SSR（服务端渲染）的常见问题：vue-collage-slideshow组件内部用到了只有浏览器环境才有的document对象，你当前的写法是在组件初始化阶段就直接导入该组件，Nuxt服务端打包执行时没有浏览器上下文，就会触发这个错误。模板里的<client-only>仅控制组件渲染阶段不输出到服务端渲染结果，无法拦截顶部的导入逻辑。

解决方案 #

方案1：组件内动态导入（无需修改配置，最便捷）

直接删除脚本顶部的静态导入语句，将组件注册为异步客户端组件即可，修改后的<script>代码如下：

<script>
export default {
  name: 'Collage',
  components: {
    // 动态导入，仅在客户端加载组件
    Slideshow: () => import('vue-collage-slideshow')
  },
  data() {
    return {
      images: [
        { image: 'https://wallpapershome.com/images/pages/pic_v/5111.jpg' },
        {
          image:
            'https://thumbor.forbes.com/thumbor/1280x868/https%3A%2F%2Fblogs-images.forbes.com%2Fannabel%2Ffiles%2F2018%2F02%2FLouisville_Skyline-1200x801.jpg',
        },
        { image: 'https://t-ec.bstatic.com/images/hotel/max1024x768/683/68345284.jpg' },
        { image: 'https://i.pinimg.com/originals/08/ec/94/08ec94ecf38048a2102ec4783dc88fa8.jpg' },
        { image: 'https://t-ec.bstatic.com/images/hotel/max1024x768/873/87316855.jpg' },
      ],
    }
  },
}
</script>

模板部分无需修改，保留原有<client-only>配置即可。

方案2：注册为全局客户端插件（适合多页面复用该组件的场景）

1. 在项目plugins目录下新建vue-collage-slideshow.client.js文件，写入以下内容：

import Vue from 'vue'
import Slideshow from 'vue-collage-slideshow'
Vue.component('Slideshow', Slideshow)

文件名的.client后缀会告知Nuxt仅在客户端环境加载该插件，无需额外配置。
2. 原有组件的脚本中删除导入和局部注册Slideshow的代码即可直接使用组件。

修改完成后重启Nuxt开发服务即可解决报错。

内容的提问来源于stack exchange，提问作者Laiba Gul