[和訳] Nuxt3 公式サイト~Auto Imports
この記事について
この記事はNuxt3 公式サイト Auto Imports を和訳したものになります（日本語が不自然になってしまっている箇所があるのはごめんなさい）。
Auto Imports
Nuxt はヘルパー関数、コンポーザブル、Vue API を明示的にインポートしなくてもアプリケーション全体で使用できるように自動インポートします。ディレクトリ構造をもとにして、全ての Nuxt アプリケーションは独自コンポーネント、コンポーザブル、プラグインに自動インポートを使用できます。コンポーネント、コンポーザブル、プラグインはこれらの関数を使用することができます。
古典的なグローバル宣言とは異なり、Nuxt は型と IDE の補完とヒントを保ち、プロダクションコードで実際に使用されるものだけを含めます。
ドキュメントでは、明示的にインポートされていない全ての関数は Nuxt によって自動インポートされ、コード内でそのまま使用できます。自動インポートされたコンポーザブルとユーティリティのリファレンスは API セクションで見つけることができます。
Nuxt Auto-imports
Nuxt は、データの取得実行、アプリコンテキストやランタイム設定へのアクセス、状態管理、コンポーネントとプラグインの定義を行うための関数とコンポーザブルを自動インポートします。
<script setup>
// useAsyncData() と $fetch() は自動インポートされています
const {data, refresh, pending} = await useAsyncData('/api/hello', () => $fetch('/api/hello'))
</script>
Vue Auto-imports
Vue3 は ref や computed のような Reactivity API および Nuxt が自動インポートしたライフサイクルフックやヘルパーを公開します。
<script setup>
// ref() と computed() は自動インポートされています
const count = ref(1)
const double = computed(() => count.value * 2)
</script>
Directory-based Auto-imports
Nuxt は下に定義されたディレクトリに作成されたファイルを直接自動インポートします。
-
components/を Vue コンポーネントとしてインポート -
composables/を Vue コンポーザブルとしてインポート -
utils/をヘルパー関数とその他のユーティリティとしてインポート
Explicit Imports
Nuxt は全ての自動インポートを #imports というエイリアスで公開しており、必要に応じてこれを使用してインポートを明示することができます。
<script setup>
import { ref, computed } from '#imports'
const count = ref(1)
count double = computed(() => count.value * 2)
</script>
Disable Auto-imports
自動インポートを無効にしたい場合は、imports.autoImport を false に設定できます。
export default defineNuxtConfig({
imports: {
autoImport: false
}
})
これにより暗黙の自動インポートは完全に無効になりますが、明示的なインポート（Explicit Import）を使用することは可能なままです。
Discussion