Back to Details

nuxt-modules

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Nuxt Module Development

Nuxt 模块开发

Guide for creating Nuxt modules that extend framework functionality.
Related skills: 
nuxt
(basics), 
vue
(runtime patterns)
本指南介绍如何创建可扩展框架功能的Nuxt模块。
相关技能： 
nuxt
（基础），
vue
（运行时模式）

Quick Start

快速开始

bash
npx nuxi init -t module my-module
cd my-module && npm install
npm run dev        # Start playground
npm run dev:build  # Build in watch mode
npm run test       # Run tests
bash
npx nuxi init -t module my-module
cd my-module && npm install
npm run dev        # 启动测试环境
npm run dev:build  # 以监听模式构建
npm run test       # 运行测试

Available Guidance

可用指南

  • references/development.md - Module anatomy, defineNuxtModule, Kit utilities, hooks
  • references/testing-and-publishing.md - E2E testing, best practices, releasing, publishing
  • references/ci-workflows.md - Copy-paste CI/CD workflow templates
  • references/development.md - 模块结构、defineNuxtModule、Kit工具、钩子
  • references/testing-and-publishing.md - E2E测试、最佳实践、版本发布、npm发布
  • references/ci-workflows.md - 可直接复用的CI/CD工作流模板

Loading Files

文件加载建议

Consider loading these reference files based on your task:
  • references/development.md - if building module features, using defineNuxtModule, or working with Kit utilities
  • references/testing-and-publishing.md - if writing E2E tests, publishing to npm, or following best practices
  • references/ci-workflows.md - if setting up CI/CD workflows for your module
DO NOT load all files at once. Load only what's relevant to your current task.
请根据当前任务加载对应的参考文件：
  • references/development.md - 当你需要构建模块功能、使用defineNuxtModule或Kit工具时
  • references/testing-and-publishing.md - 当你需要编写E2E测试、发布至npm或遵循最佳实践时
  • references/ci-workflows.md - 当你需要为模块配置CI/CD工作流时
请勿一次性加载所有文件。仅加载与当前任务相关的文件。

Module Types

模块类型

TypeLocationUse Case
Publishednpm package
@nuxtjs/
, 
nuxt-
distribution
Local
modules/
dir		Project-specific extensions
Inline
nuxt.config.ts
Simple one-off hooks
类型位置使用场景
已发布模块npm 包
@nuxtjs/
、
nuxt-
前缀的分发模块
本地模块
modules/
目录		项目专属扩展
内联模块
nuxt.config.ts
简单的一次性钩子

Project Structure

项目结构

my-module/
├── src/
│   ├── module.ts           # Entry point
│   └── runtime/            # Injected into user's app
│       ├── components/
│       ├── composables/
│       ├── plugins/
│       └── server/
├── playground/             # Dev testing
└── test/fixtures/          # E2E tests
my-module/
├── src/
│   ├── module.ts           # 入口文件
│   └── runtime/            # 注入至用户应用的代码
│       ├── components/
│       ├── composables/
│       ├── plugins/
│       └── server/
├── playground/             # 开发测试环境
└── test/fixtures/          # E2E 测试用例

Resources

资源链接