自動匯入

Nuxt 自動匯入元件、可組合項和Vue.js API以便在整個應用程式中使用，無需顯式匯入它們。

<script setup lang="ts">
const count = ref(1) // ref is auto-imported
</script>

得益於其固定的目錄結構，Nuxt 可以自動匯入您的 app/components/、app/composables/ 和 app/utils/。

與經典的全域性宣告不同，Nuxt 保留了型別、IDE 補全和提示，並且只包含您生產程式碼中使用的內容。

內建自動匯入

Nuxt 自動匯入函式和可組合項以執行資料獲取，訪問應用程式上下文和執行時配置，管理狀態或定義元件和外掛。

<script setup lang="ts">
/* useFetch() is auto-imported */
const { data, refresh, status } = await useFetch('/api/hello')
</script>

Vue 暴露了諸如 ref 或 computed 等響應式 API，以及生命週期鉤子和輔助函式，它們都由 Nuxt 自動匯入。

<script setup lang="ts">
/* ref() and computed() are auto-imported */
const count = ref(1)
const double = computed(() => count.value * 2)
</script>

Vue 和 Nuxt 可組合項

當您使用 Vue 和 Nuxt 提供的內建組合式 API 可組合項時，請注意，其中許多都依賴於在正確的 上下文 中呼叫。

在元件生命週期中，Vue 透過全域性變數跟蹤當前元件的臨時例項（類似地，Nuxt 跟蹤 nuxtApp 的臨時例項），然後在同一個 tick 中將其取消設定。這在伺服器渲染時至關重要，既能避免跨請求狀態汙染（在兩個使用者之間洩露共享引用），又能避免不同元件之間的洩露。

這意味著（除了極少數例外）您不能在 Nuxt 外掛、Nuxt 路由中介軟體或 Vue setup 函式之外使用它們。此外，您必須同步使用它們——也就是說，在呼叫可組合項之前不能使用 await，除了在 <script setup> 塊中、在用 defineNuxtComponent 宣告的元件的 setup 函式中、在 defineNuxtPlugin 中或在 defineNuxtRouteMiddleware 中，我們在其中執行轉換以在 await 之後仍保持同步上下文。

如果您收到類似 Nuxt instance is unavailable 的錯誤訊息，那麼很可能意味著您在 Vue 或 Nuxt 生命週期的錯誤位置呼叫了 Nuxt 可組合項。

破壞性程式碼示例

// trying to access runtime config outside a composable
const config = useRuntimeConfig()

export const useMyComposable = () => {
  // accessing runtime config here
}

可執行程式碼示例

export const useMyComposable = () => {
  // Because your composable is called in the right place in the lifecycle,
  // useRuntimeConfig will work here
  const config = useRuntimeConfig()

  // ...
}

基於目錄的自動匯入

Nuxt 直接自動匯入在定義目錄中建立的檔案

• app/components/ 用於Vue 元件。
• app/composables/ 用於Vue 可組合項。
• app/utils/ 用於輔助函式和其他實用工具。

顯式匯入

Nuxt 透過 #imports 別名暴露每個自動匯入，如果需要，可以使用它進行顯式匯入

<script setup lang="ts">
import { computed, ref } from '#imports'

const count = ref(1)
const double = computed(() => count.value * 2)
</script>

停用自動匯入

如果您想停用可組合項和實用工具的自動匯入，可以在 nuxt.config 檔案中將 imports.autoImport 設定為 false。

export default defineNuxtConfig({
  imports: {
    autoImport: false,
  },
})

這將完全停用自動匯入，但仍然可以使用 顯式匯入 從 #imports。

部分停用自動匯入

如果您希望像 ref 這樣的框架特定函式保持自動匯入，但希望停用您自己程式碼（例如，自定義可組合項）的自動匯入，則可以在您的 nuxt.config.ts 檔案中將 imports.scan 選項設定為 false

export default defineNuxtConfig({
  imports: {
    scan: false,
  },
})

此配置下

• 像 ref、computed 或 watch 這樣的框架函式仍然可以無需手動匯入而正常工作。
• 自定義程式碼，例如可組合項，將需要在您的檔案中手動匯入。

自動匯入元件

Nuxt 還會自動從您的 ~/components 目錄匯入元件，儘管這與自動匯入可組合項和實用函式是單獨配置的。

要停用從您自己的 ~/components 目錄自動匯入元件，您可以將 components.dirs 設定為空陣列（但請注意，這不會影響模組新增的元件）。

export default defineNuxtConfig({
  components: {
    dirs: [],
  },
})

從第三方包自動匯入

Nuxt 還允許從第三方包自動匯入。

例如，您可以像這樣啟用從 vue-i18n 包自動匯入 useI18n 可組合項

export default defineNuxtConfig({
  imports: {
    presets: [
      {
        from: 'vue-i18n',
        imports: ['useI18n'],
      },
    ],
  },
})