鐵人賽過了快一半了才發現這個重要的東西只有簡單帶過，沒有詳細介紹到（這還是文件中核心概念的第一章），可能是使用上太習慣，所以習慣到忽略了...autoImport 是一個非常方便的功能，接下來介紹如何使用這些自動引用的功能。

Vue APIs

在寫 Vue3 的時候如果要用到 ref, reactive, computed... 都需要先撰寫 import 才能使用，而 Nuxt 會自動幫我們引用，只要直接用就可以了。

<script setup>
  // 不需要撰寫下面這行
  // import { ref, computed } from 'vue';
  
  const count = ref(1);
  const double = computed(() => count.value * 2);
</script>

Components

參考下面的目錄結構，components 的 Modal.vue 可以透過 autoImport 直接用 <Modal> 來使用。
而 Button.vue 則是可以結合子路徑的名稱來達成 autoImport，每個資料夾的名稱開頭會轉為大寫，所以可以使用 <OhMyButton> 這個名稱來直接使用，但要注意的是檔案的命名還是盡量有其意義才能方便後續判讀，不要過度使用這種自動引用的方式。

| components/
--| Modal.vue
--| oh/
----| my/
------| Button.vue

Components x Prefix

除了組合路徑名稱的自動引用，也可以加入 Prefix 來達成其他功能，Lazy就是一個簡單的 Prefix，只要把這個字加在元件的名稱前方，就可以動態載入元件。

<template>
  <div>
    <TheHeader />
    <slot />
    <LazyTheFooter />
  </div>
</template>

Composables

Composables 同樣也是存放在第一層目錄下可以直接引用，除此之外，內容的撰寫也有兩種方式：

• export default（匿名）

export default function () {
  return useState('foo', () => 'bar')
}

• 和檔名一樣的具名函式

// 檔名為 composables/useFoo.ts
export const useFoo = () => {
  return useState('foo', () => 'bar')
}

符合上述的兩個條件（第一層目錄、匯出預設 或是 和檔名相同的具名函式）後就可以直接使用了

<script setup>
const foo = useFoo()
</script>

關閉 autoImport

我們也可以修改 nuxt.config 來關閉這個功能。

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