modules

使用 modules/ 目录可以自动注册应用中的本地模块。

这是存放您在构建应用时开发的任何本地模块的好地方。

自动注册的文件匹配模式为：

  • modules/*/index.ts
  • modules/*.ts

您无需单独将这些本地模块添加到 nuxt.config.ts 中。

// `nuxt/kit` is a helper subpath import you can use when defining local modules
// that means you do not need to add `@nuxt/kit` to your project's dependencies
import { addComponentsDir, addServerHandler, createResolver, defineNuxtModule } from 'nuxt/kit'

export default defineNuxtModule({
  meta: {
    name: 'hello',
  },
  setup () {
    const resolver = createResolver(import.meta.url)

    // Add an API route
    addServerHandler({
      route: '/api/hello',
      handler: resolver.resolve('./runtime/api-route'),
    })

    // Add components
    addComponentsDir({
      path: resolver.resolve('./runtime/app/components'),
      pathPrefix: true, // Prefix your exports to avoid conflicts with user code or other modules
    })
  },
})

启动 Nuxt 时，hello 模块将被注册，并且 /api/hello 路由将变为可用。

请注意，通常放在 app/ 目录中的所有组件、页面、组合式函数 (composables) 和其他文件，都需要放置在 modules/your-module/runtime/app/ 中。这可以确保它们得到正确的类型检查。

模块按以下顺序执行：

  • 首先，加载 nuxt.config.ts 中定义的模块。
  • 然后，执行 modules/ 目录中找到的模块，它们会按字母顺序加载。

您可以通过在每个目录名称前加上数字来更改本地模块的执行顺序。

目录结构
modules/
  1.first-module/
    index.ts
  2.second-module.ts
在 文档 > 4 X > 指南 > 模块 中了解更多信息。
观看关于 Nuxt 私有模块的 Vue School 视频。