Nuxt3集成vue-pull-to插件报错：Window is not defined 求助

错误原因 #

vue-pull-to插件依赖浏览器环境的window对象，而Nuxt3默认开启SSR（服务端渲染），服务端执行代码时不存在window对象，因此抛出该错误。

解决方案 #

方法一：客户端动态导入组件 + 包裹 #

在页面组件中，通过defineAsyncComponent指定组件仅在客户端加载，并用<client-only>确保组件只在浏览器环境渲染：

<template>
  <div>
    <client-only>
      <pull-to :top-load-method="refresh">
        <ul v-for="item in dataList" :key="item">
          <li>{{ item }}</li>
        </ul>
      </pull-to>
    </client-only>
  </div> 
</template>

<script setup>
import { defineAsyncComponent, ref } from 'vue'
// 动态导入组件并禁用SSR
const PullTo = defineAsyncComponent({
  loader: () => import('vue-pull-to'),
  ssr: false
})
// 引入插件样式
import 'vue-pull-to/lib/vue-pull-to.css'

const dataList = ref([])

const refresh = async (loaded) => {
  // 替换为你的实际数据请求逻辑
  const res = await fetch('你的接口地址')
  const data = await res.json()
  dataList.value = data.dataList
  loaded('done')
}
</script>

方法二：创建客户端专属插件注册组件 #

1. 在项目plugins目录下创建pull-to.client.js（后缀.client.js会让Nuxt自动仅在客户端加载该插件）：

import PullTo from 'vue-pull-to'
import 'vue-pull-to/lib/vue-pull-to.css'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.component('PullTo', PullTo)
})

2. 在页面组件中直接使用，并用<client-only>包裹：

<template>
  <div>
    <client-only>
      <pull-to :top-load-method="refresh">
        <ul v-for="item in dataList" :key="item">
          <li>{{ item }}</li>
        </ul>
      </pull-to>
    </client-only>
  </div> 
</template>

<script setup>
import { ref } from 'vue'

const dataList = ref([])

const refresh = async (loaded) => {
  const res = await fetch('你的接口地址')
  const data = await res.json()
  dataList.value = data.dataList
  loaded('done')
}
</script>

额外说明 #

• 保留nuxt.config.ts中的build.transpile: ['vue-pull-to']配置，确保插件代码能被正确转译。
• 若未安装插件样式，需手动引入vue-pull-to/lib/vue-pull-to.css，否则下拉刷新的UI会异常。

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