# [Nuxt] Nuxt 3 - Auto-imports

###### tags: `Nuxt`

## 有 Auto-imports 功能
* Data fetching: useAsyncData、$fetch、…
* useNuxtApp()
* useRuntimeConfig()
* useState()
* ref、reactive、computed、lifecycle hooks、…
* components/
* composables/
* [utils/](https://nuxt.com.cn/docs/api/utils/dollarfetch)

## 增加資料夾

// nuxt.config.ts/js
export default defineNuxtConfig({
  import: {
    dirs: ['stores'],
  },
});

## 增加 third-party packages
:::info
[官方文件](https://nuxt.com/docs/guide/concepts/auto-imports#auto-import-from-third-party-packages)
:::

// nuxt.config.ts
// 範例：vue-i18n 的 useI18n
export default defineNuxtConfig({
  imports: {
    presets: [
      {
        from: 'vue-i18n',
        imports: ['useI18n'],
      },
    ],
  },
});

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

// nuxt.config.ts
export default defineNuxtConfig({
  imports: {
    autoImport: false,
  },
});

---

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