# [Nuxt] Nuxt 3 - Components

###### tags: `Nuxt`

* 檔名採大駝峰式命名
* 子資料夾內的組件使用時要加上資料夾的名稱。
* 例：`components/base/Btn.vue`，使用時寫 `<BaseBtn>`
* [官方建議命名一致](https://nuxt.com/docs/guide/directory-structure/components#component-names "components/#component-names · Nuxt Directory Structure")，故可將 `Btn.vue` 改成 `BaseBtn.vue`，使用時一樣寫 `<BaseBtn>`
* `<ClientOnly></ClientOnly>`: 寫在裡面的 DOM 元素只在 client 端渲染，[官方文件](https://nuxt.com/docs/api/components/client-only#clientonly)

## 關於 Auto-imports
使用時不需寫 `import xxx from '@/components/xxx'`，即可在 `<template>` 內直接使用 component

### 只想讓特定資料夾（例：`components/global/`）內的組件有 Auto-imports，其他仍維持手動 import

// nuxt.config.ts
export default defineNuxtConfig({
  components: {
    dirs: [
      {
        path: '~/components/global',
        global: true,
      },
    ],
  },
});

### 希望禁用 Auto-imports
:::info
[官方文件](https://nuxt.com/docs/guide/concepts/auto-imports#auto-imported-components)
:::

// nuxt.config.ts
export default defineNuxtConfig({
  components: {
    dirs: [],
  },
});

## 參考資料
* [官方文件](https://nuxt.com/docs/guide/directory-structure/components "components/ · Nuxt Directory Structure")

---

:::info
建立日期：2023-08-30
更新日期：2023-08-30
:::