Nuxt 3 社区热门模块精选指南

Nuxt 模块生态概览

Nuxt 模块是扩展框架功能的最佳方式。社区提供了丰富的模块，覆盖开发中的各种需求。

分类	热门模块	主要功能
UI	Nuxt UI, TailwindCSS	组件库、样式框架
SEO	Nuxt SEO, Sitemap	搜索优化、站点地图
内容	Nuxt Content	Markdown 驱动的内容
认证	Nuxt Auth Utils	用户认证
工具	VueUse, DevTools	组合式函数、调试

UI 相关模块

@nuxtjs/tailwindcss

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxtjs/tailwindcss'],
  tailwindcss: {
    cssPath: '~/assets/css/tailwind.css',
    configPath: 'tailwind.config.ts'
  }
})

@nuxt/ui

Nuxt 官方 UI 组件库，基于 TailwindCSS：

<template>
  <UButton color="primary" @click="submit">
    提交
  </UButton>
  <UModal v-model="isOpen">
    <UCard>
      <template #header>标题</template>
      内容
    </UCard>
  </UModal>
</template>

SEO 相关模块

@nuxtjs/sitemap

自动生成站点地图：

export default defineNuxtConfig({
  modules: ['@nuxtjs/sitemap'],
  sitemap: {
    hostname: 'https://example.com',
    routes: async () => {
      const posts = await fetchPosts()
      return posts.map(p => `/blog/${p.slug}`)
    }
  }
})

nuxt-seo-kit

一站式 SEO 解决方案：

export default defineNuxtConfig({
  modules: ['nuxt-seo-kit'],
  site: {
    url: 'https://example.com',
    name: '网站名称'
  }
})

内容管理

@nuxt/content

使用 Markdown 管理内容：

// 查询内容
const { data } = await useAsyncData('articles', () =>
  queryContent('/blog')
    .where({ published: true })
    .sort({ date: -1 })
    .limit(10)
    .find()
)

关键说明： Nuxt Content 支持 MDC 语法，可以在 Markdown 中使用 Vue 组件，非常适合技术文档和博客。

工具类模块

@vueuse/nuxt

VueUse 的 Nuxt 集成：

<script setup>
// 自动导入的组合式函数
const { x, y } = useMouse()
const isDark = useDark()
const { toggle } = useToggle(isDark)
</script>

@nuxt/devtools

强大的开发调试工具：

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

认证与安全

nuxt-auth-utils

简单的认证方案：

// server/routes/auth/github.get.ts
export default defineOAuthGitHubEventHandler({
  async onSuccess(event, { user }) {
    await setUserSession(event, { user })
    return sendRedirect(event, '/')
  }
})

图片优化

@nuxt/image

自动图片优化：

<template>
  <NuxtImg
    src="/photo.jpg"
    width="400"
    height="300"
    format="webp"
    loading="lazy"
  />
</template>

模块选择建议

场景	推荐模块
企业官网	Nuxt UI + Content + SEO
电商网站	TailwindCSS + Image + Auth
技术博客	Content + Sitemap + Feed
仪表盘	Nuxt UI + DevTools

安装与配置最佳实践

# 使用 nuxi 添加模块
npx nuxi module add @nuxtjs/tailwindcss
npx nuxi module add @nuxt/image

注意事项

版本兼容：确认模块支持 Nuxt 3
按需引入：只安装需要的模块
查看文档：每个模块的配置可能不同
性能考量：评估模块对构建时间的影响

Nuxt 模块生态是其核心优势之一，善用社区模块可以大幅提升开发效率。