Nuxt插件声明带$前缀触发Vue警告的问题求助

问题原因 #

Vue 3 明确规定：setup() 返回的属性不能以 $ 或 _ 开头，这些前缀是 Vue 内部变量的保留标识。而 Nuxt 3 的插件注入机制会自动给你定义的方法加上 $ 前缀（比如你写的 slugifier 会变成 $slugifier），这是 Nuxt 用于全局注入的命名约定，但当你手动把带 $ 前缀的变量返回给模板时，就触发了 Vue 的保留前缀检查警告。

解决办法 #

有两种简单的处理方式：

1. 重命名后返回
   在 setup() 里把 $slugifier 重命名为不带 $ 的变量，再返回给模板使用：

   <script>
   export default {
     async setup() {
       const { $slugifier } = useNuxtApp()
       // 重命名避免使用保留前缀
       return {
         slugifier: $slugifier
       }
     },
   }
   </script>
   

   模板里直接用 slugifier 即可：

   <template>
     <div>{{ slugifier('Test Content') }}</div>
   </template>
   

2. 无需手动返回，直接在模板使用
   Nuxt 注入的 $ 开头变量会自动挂载到组件实例和模板上下文里，你根本不需要在 setup() 里手动返回，直接在模板里调用 $slugifier 就行：

   <template>
     <div>{{ $slugifier('Test Content') }}</div>
   </template>
   
   <script>
   export default {
     async setup() {
       // 这里不需要任何返回操作
     },
   }
   </script>
   

补充说明 #

你按 Nuxt 官方文档操作本身没错，只是忽略了 Vue 对返回属性命名的限制。Nuxt 内部在处理全局注入时已经规避了这个问题，但手动返回带保留前缀的变量就会触发警告。

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