Nuxt应用使用Flickity实现轮播功能时抛出错误该如何解决？

你遇到的报错是Nuxt SSR服务端渲染阶段的典型问题，vue-flickity 底层依赖的原生flickity库会直接调用浏览器专属的window、document对象，而Nuxt默认会在服务端执行一次组件初始化代码，服务端运行环境没有这些浏览器API，就会抛出引用错误。

解决方法有两种可选： #

方法1：注册为客户端插件（推荐）

1. 在项目plugins目录下新建flickity.client.js文件，.client.js后缀会告诉Nuxt该插件仅在客户端环境加载：

import Vue from 'vue'
import Flickity from 'vue-flickity'
// 全局注册Flickity组件
Vue.component('Flickity', Flickity)

2. 在nuxt.config.js中添加对应配置：

export default {
  // 其他原有配置...
  plugins: [
    '~/plugins/flickity.client.js'
  ],
  // 引入flickity基础样式，避免轮播样式错乱
  css: [
    'flickity/dist/flickity.min.css'
  ]
}

3. 删掉组件内原来的import Flickity from 'vue-flickity'和局部注册components: { Flickity }代码即可，全局注册后可以直接在模板使用。

方法2：组件内动态异步导入

如果不需要全局使用，也可以直接在当前轮播组件内做条件导入，仅在客户端加载Flickity：
删掉原来的静态导入代码，修改组件的components配置如下：

export default {
  components: {
    Flickity: () => process.client ? import('vue-flickity') : Promise.resolve({ render: h => h('div') })
  },
  // 其他原有组件配置...
}

同样记得在nuxt.config.js的css配置中引入flickity的基础样式。

你现有的模板已经包裹了<ClientOnly>组件，和以上两种方案配合即可完全规避服务端执行报错的问题。

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