Nuxt3中使用VueUse的useEventListener报document未定义问题求助

你遇到的核心问题是Nuxt3的同构渲染机制导致的，和VueUse的useEventListener本身的逻辑无关：

• VueUse的useEventListener确实会自动在组件onMounted钩子注册监听，onUnmounted时移除，这点你没理解错。
• 但Nuxt3会先在服务端渲染组件代码，服务端环境里根本没有document对象。你直接把document作为参数传给useEventListener时，服务端执行到这行代码就会立刻尝试访问document，这时候自然会报“document is not defined”——这和useEventListener什么时候注册监听无关，是参数本身在服务端就触发了错误。

官网示例是纯客户端渲染的Vue项目，不存在服务端执行环节，所以直接传document没问题，但放到Nuxt3这种同构框架里就得适配环境。

正确的解决方式 #

不用process.client包裹整个调用，换两种写法就能解决：

1. 传入返回document的函数 #

让useEventListener在客户端挂载时才去获取document：

<script lang="ts" setup>
useEventListener(() => document, 'keydown', (e: KeyboardEvent) => {
    if (e.key === 'Escape') {
        // ...
    }
})
</script>

2. 使用VueUse的useDocument组合式API #

它会自动处理同构环境，确保只在客户端返回document：

<script lang="ts" setup>
const doc = useDocument()
useEventListener(doc, 'keydown', (e: KeyboardEvent) => {
    if (e.key === 'Escape') {
        // ...
    }
})
</script>

这两种写法都能保留useEventListener的简洁性，同时适配Nuxt3的同构渲染。

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