全书目录

第六篇：Nuxt 完全指南 —— 全媒体演播中心宇宙

第九章：plugins —— 全台挂件系统，只在开台时装一次

1 分钟 351 字 第 136 / 962 个阅读单元

Nuxt 官方文档把 app/plugins/ 定义成应用创建时的插件系统。

它适合做：

  • 注册 Vue 插件
  • 注入全局工具
  • 接第三方 SDK
  • 挂全局 hooks

最基础写法：

ts
// app/plugins/hello.ts
export default defineNuxtPlugin((nuxtApp) => {
  return {
    provide: {
      stationName: '软件城市电视台'
    }
  }
})

页面里直接取：

vue
<script setup lang="ts">
const { $stationName } = useNuxtApp()
</script>

<template>
  <h1>{{ $stationName }}</h1>
</template>
#1. 客户端专属 / 服务端专属

Nuxt 文档明确支持文件后缀：

  • .client
  • .server
text
app/plugins/analytics.client.ts
app/plugins/request-id.server.ts

这非常重要，因为不是所有插件都能双端跑。

#2. 插件别滥用

很多人学到 provide 后，容易变成：

text
什么都往插件里注入

最后的问题是：

  • 调用链难追
  • 测试困难
  • 依赖来源模糊

更实用的判断是：

text
需要在应用启动时统一安装的东西 → plugin
普通可复用逻辑 → composable
普通工具函数 → utils
#3. 顶层扫描规则要记住

官方文档特别提醒：

  • 插件自动扫描的是顶层文件
  • 子目录里通常只有 index 这种情况还能被识别
  • 更深层插件要在 nuxt.config.ts 里手动声明

这意味着插件系统是“可控自动化”，不是“无限制全自动”。