Nuxt3自定义指令未定义报错，按官方文档配置仍无法解决

问题根源分析 #

• 拼写错误：插件代码mounted钩子内的vel.focus()是笔误，应为el.focus()，该错误会导致客户端执行异常，同时干扰指令正常注册流程。
• SSR配置冲突：你给插件标记了client模式，却保留了getSSRProps方法，服务端渲染时找不到指令定义，从而抛出Cannot read property 'getSSRProps' of undefined错误。

修复步骤 #

1. 修正插件代码笔误 #

将插件中的vel改为el：

export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.directive('myd', {
        mounted (el) {
            el.focus() // 修正拼写错误
        },
        getSSRProps (binding, vnode) {
            return {}
        }
    })
})

2. 调整插件SSR配置 #

根据需求选择以下方案之一：

方案A：保留SSR支持

若指令需要在服务端、客户端同时生效，不要给插件加client模式，直接在nuxt.config.ts中注册（或依赖Nuxt自动识别插件目录文件，无需手动配置）：

// nuxt.config.ts
export default defineNuxtConfig({
  plugins: [
    '~/plugins/myd.ts'
  ]
})

方案B：仅客户端使用指令

若指令仅涉及DOM操作（如focus），移除getSSRProps并将插件设为客户端模式：

// plugins/myd.client.ts
export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.directive('myd', {
        mounted (el) {
            el.focus()
        }
        // 删除getSSRProps方法
    })
})

此时nuxt.config.ts可保留原有配置，或依赖Nuxt自动识别.client.ts后缀的插件，无需手动配置。

3. 组件中指令使用保持不变 #

组件内的指令调用方式正确，无需修改：

<template>
  <div>
    <div v-myd="'tmp'"></div>
  </div>
</template>

额外注意事项 #

• 指令注册名是myd，组件中使用v-myd的格式正确，无需额外添加前缀。
• 测试前删除.nuxt目录和node_modules/.cache缓存，避免旧代码干扰结果。

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