模块生态速览

47-1

Nuxt 模块生态每月 npm 下载量超过 3500 万次，覆盖从内容管理到支付、从地图到分析的方方面面。官方模块（@nuxt/）、社区模块（@nuxtjs/）都经过验证，可以放心用。本章挑最常用、新手最容易碰到的几类讲。

47-2

做文档站、博客、知识库，@nuxt/content 几乎是标配。它把 Markdown、YAML、JSON 等文件变成可查询的内容源，你不用自己搭数据库：

npm i @nuxt/content

export default defineNuxtConfig({
  modules: ['@nuxt/content'],
})

装好后在页面里用组合式函数读取：

<script setup lang="ts">
const { data: posts } = await useAsyncData('posts', () => queryContent('/blog').find())
</script>

它自带语法高亮、目录生成、全文搜索等能力，省下大量重复工作。

47-3

未优化的图片是拖慢首屏的头号元凶。@nuxt/image 是开箱即用的图片优化模块，本地远程图都能用：

npm i @nuxt/image

export default defineNuxtConfig({
  modules: ['@nuxt/image'],
})

用 <NuxtImg> 替代原生 <img>，它会自动转 WebP/AVIF、按尺寸裁剪、生成响应式 sizes、支持原生懒加载：

<template>
  <NuxtImg src="/hero.jpg" format="webp" loading="eager" width="800" height="400" />
</template>

首屏大图 loading="eager" 加预加载，次要图 loading="lazy"，配合第 44 章的性能策略效果最好。

47-4

网页字体若加载不当，会造成布局抖动（CLS）和额外网络请求。@nuxt/fonts 自动优化字体并自托管：

• 解析 public/ 或 Google/Bunny/Fontshare 等来源的字体；
• 生成 @font-face 规则，rewrite 到 /_fonts 并本地缓存；
• 生成兜底字体指标，减少 CLS；
• 打包进构建产物，文件名哈希、长缓存。

npm i @nuxt/fonts

装好即生效，几乎零配置。

47-5

第 26 章讲过，Pinia 是 Vue 官方推荐的状态管理库。Nuxt 里装 @pinia/nuxt 即可获得自动导入的 defineStore 和 SSR 安全支持：

npm i @pinia/nuxt pinia

export default defineNuxtConfig({
  modules: ['@pinia/nuxt'],
})

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  actions: { increment() { this.count++ } },
})

47-6

多语言站点用 @nuxtjs/i18n，它处理路由前缀（/en、/zh）、语言切换、本地化等：

npm i @nuxtjs/i18n

export default defineNuxtConfig({
  modules: ['@nuxtjs/i18n'],
  i18n: {
    locales: ['en', 'zh'],
    defaultLocale: 'zh',
  },
})

装好后 useI18n() 自动可用（在 imports.presets 里登记过）。

47-7

喜欢 Tailwind 的话，@nuxtjs/tailwindcss 一键集成：

npm i -D @nuxtjs/tailwindcss

export default defineNuxtConfig({
  modules: ['@nuxtjs/tailwindcss'],
})

47-8

分析、地图、社交组件等第三方脚本容易拖慢 INP。@nuxt/scripts 把它们封装成带 SSR 支持和类型安全的加载方式：

<script setup lang="ts">
const { onLoaded } = useScriptGoogleAnalytics({ id: 'G-1234567' })
onLoaded(() => { /* 脚本加载完 */ })
</script>

47-9

1. 优先官方（@nuxt/）和社区（@nuxtjs/）模块，兼容性与维护更有保障。
2. 装之前确认它支持你的 Nuxt 版本（Nuxt 4 下多数模块已适配）。
3. 别为「可能用得上」提前装一堆模块，每个都增加构建复杂度。

47-10

Nuxt 3 与 Nuxt 4 下这些模块用法基本一致。Nuxt 4 因 app/ 约定，模块注入的目录（如 components/、stores/）默认在 app/ 内。模块本身的 API 通常无需改动。

47-11

不想逐个看文档，先按你要做的事对号入座：

• 写文档站 / 博客 / 知识库 → @nuxt/content
• 优化图片 → @nuxt/image
• 优化字体、消除布局抖动 → @nuxt/fonts
• 全局状态、购物车 → @pinia/nuxt
• 多语言 → @nuxtjs/i18n
• 用 Tailwind → @nuxtjs/tailwindcss
• 接第三方脚本（分析/地图）→ @nuxt/scripts
• 表单校验 → @nuxtjs/zod 或 vorms
• 认证登录 → @nuxtjs/auth 或自写中间件 + useFetch

47-12

• 内容站 / 博客：@nuxt/content + @nuxt/image + @nuxt/fonts，配 useSeoMeta 做 SEO，再 nuxt generate 静态化。
• 电商 / 后台：@pinia/nuxt 管状态 + 自写鉴权中间件 + useFetch 调 API；后台部分可用 routeRules 设 ssr: false 提速。
• 营销 / 落地页：@nuxt/image + @nuxt/fonts + @nuxt/scripts，配合预渲染做到近乎零 JS。

如果列表里没找到你要的，也别急着自己造：先去 GitHub 搜 nuxt module <你的需求>、或在 Discord 问一句，很可能别人已经写过一个没被收录的。实在没有，再按第 38 章讲的最小骨架自己写一个——写完发出来，说不定就成社区模块了。

47-13

内容站用 @nuxt/content、图片用 @nuxt/image、字体用 @nuxt/fonts、状态用 Pinia、多语言用 @nuxtjs/i18n、Tailwind 用 @nuxtjs/tailwindcss、第三方脚本用 @nuxt/scripts。按需选、确认版本。下一章讲 Nuxt 3 与 4 的差异和迁移。

47-6 如何评估一个模块的质量

Nuxt 生态里有成百上千个模块，选择时需要评估质量。几个关键指标：最近更新时间（超过一年没更新的模块可能有兼容性问题）、GitHub Star 数和 Issue 处理情况（反映社区活跃度与维护力度）、npm 周下载量（反映使用广泛程度）、是否有完整的文档和 TypeScript 支持。

优先选择 Nuxt 官方维护的模块（如 @nuxt/image、@nuxt/content），它们的质量和兼容性最有保障。其次是社区里知名度高、维护活跃的模块。对于小众模块，使用前先评估它的功能是否真的需要，避免引入不必要的依赖。

安装模块后，注意观察构建时间和产物体积的变化。有些模块虽然功能强大，但会显著增加构建时间和包体积。如果影响过大，可以考虑用更轻量的替代方案，或者只引入模块的部分功能。

47-7 社区贡献与生态发展

Nuxt 的生态之所以蓬勃发展，离不开活跃的社区贡献。如果你在使用过程中发现了 bug 或者有新的想法，可以直接在 GitHub 上提交 Issue 或 Pull Request。Nuxt 团队对社区贡献非常友好，很多核心功能就来自社区的提案。

参与开源不一定非要写代码。翻译文档、编写教程、回答社区问题、分享使用经验，都是有价值的贡献。Nuxt 的中文社区近年来发展迅速，高质量的中文教程和讨论越来越丰富。

关注 Nuxt 的月度更新博客，了解最新的功能发布和生态变化。加入 Nuxt 的 Discord 服务器，和其他开发者交流经验。技术的成长不仅靠个人努力，也靠社区的集体智慧。