自動インポート

Nuxt は、コンポーネント、コンポーザブル、および Vue.js API を明示的にインポートすることなく、アプリケーション全体で使用できるように自動インポートします。

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

Nuxt は、その意見の分かれるディレクトリ構造のおかげで、components/、composables/、および utils/ を自動インポートできます。

従来のグローバル宣言とは異なり、Nuxt は型定義、IDE の補完とヒントを保持し、**本番コードで使用されているもののみを含めます**。

組み込みの自動インポート

Nuxt は、データフェッチを実行したり、アプリコンテキストや ランタイム設定にアクセスしたり、状態を管理したり、コンポーネントとプラグインを定義したりするための関数とコンポーザブルを自動インポートします。

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

Vue 3 は、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 が提供する組み込みの Composition API コンポーザブルを使用する場合、それらの多くが適切な*コンテキスト*で呼び出されることに依存していることに注意してください。

コンポーネントのライフサイクル中、Vue はグローバル変数を通じて現在のコンポーネントの一時的なインスタンスを追跡し（同様に、Nuxt は nuxtApp の一時的なインスタンスを追跡します）、同じティックでそれをリセットします。これは、サーバーレンダリング時に、リクエスト間の状態汚染（2人のユーザー間で共有される参照がリークすること）を回避し、異なるコンポーネント間のリークを回避するために不可欠です。

つまり、（ごくわずかな例外を除いて）Nuxt プラグイン、Nuxt ルートミドルウェア、または Vue の setup 関数外では使用できません。さらに、同期的に使用する必要があります。つまり、<script setup> ブロック内、defineNuxtComponent で宣言されたコンポーネントの setup 関数内、defineNuxtPlugin 内、または defineNuxtRouteMiddleware 内を除き、コンポーザブルを呼び出す前に await を使用できません。ここでは、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 は、定義されたディレクトリで作成されたファイルを直接自動インポートします。

• Vue コンポーネント用の components/。
• Vue コンポーザブル用の composables/。
• ヘルパー関数およびその他のユーティリティ用の utils/。

明示的なインポート

Nuxt は、必要に応じてインポートを明示的にするために使用できる #imports エイリアスを使用して、すべての自動インポートを公開します。

<script setup lang="ts">
import { ref, computed } 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 からの明示的なインポートを使用することは可能です。

自動インポートされたコンポーネント

Nuxt は ~/components ディレクトリのコンポーネントも自動的にインポートしますが、これはコンポーザブルやユーティリティ関数の自動インポートとは別に構成されます。

自身 の ~/components ディレクトリからのコンポーネントの自動インポートを無効にするには、components.dirs を空の配列に設定できます（ただし、これはモジュールによって追加されたコンポーネントには影響しないことに注意してください）。

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

サードパーティパッケージからの自動インポート

Nuxt では、サードパーティパッケージからの自動インポートも許可されています。

たとえば、vue-i18n パッケージから useI18n コンポーザブルの自動インポートをこのように有効にできます。

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