components

components/ 目录用于存放你所有的 Vue 组件。

Nuxt 会自动导入此目录中的任何组件（以及你使用的任何模块注册的组件）。

Directory Structure

-| components/
---| AppHeader.vue
---| AppFooter.vue

app/app.vue

<template>
  <div>
    <AppHeader />
    <NuxtPage />
    <AppFooter />
  </div>
</template>

组件名称

如果你的组件位于嵌套目录中，例如：

Directory Structure

-| components/
---| base/
-----| foo/
-------| Button.vue

...那么组件的名称将基于它自身的路径目录和文件名，并去掉重复部分。因此，组件的名称将是：

<BaseFooButton />

为了清晰起见，我们建议组件的文件名与其名称匹配。所以在上面的示例中，你可以将 Button.vue 重命名为 BaseFooButton.vue。

如果你想在不影响组件名称的情况下将组件分组到目录中，可以使用括号 ( ) 来命名分组目录。

Grouping Directory

-| components/
---| base/
-----| (foo)/
-------| Button.vue

...那么组件名称会跳过分组目录，结果为：

<BaseButton />

如果你希望仅基于名称（而非路径）自动导入组件，则需要使用配置对象的扩展形式，将 pathPrefix 选项设为 false：

nuxt.config.ts

export default defineNuxtConfig({
  components: [
    {
      path: '~/components',
      pathPrefix: false,    },
  ],
})

这会使用与 Nuxt 2 中相同的策略注册组件。例如，~/components/Some/MyComponent.vue 将可用作 <MyComponent>，而不是 <SomeMyComponent>。

动态组件

如果你想使用 Vue 的 <component :is="someComputedComponent"> 语法，你需要使用 Vue 提供的 resolveComponent 辅助函数，或者从 #components 直接导入该组件并传入 is prop。

例如：

app/pages/index.vue

<script setup lang="ts">
import { SomeComponent } from '#components'

const MyButton = resolveComponent('MyButton')
</script>

<template>
  <component :is="clickable ? MyButton : 'div'" />
  <component :is="SomeComponent" />
</template>

如果你使用 resolveComponent 来处理动态组件，请确保只插入组件的名称，它必须是一个字面量字符串，不能是或包含变量。该字符串会在编译阶段被静态分析。