Auto importを使いこなす【Nuxt3】

※ 環境
Nuxt 3.8.0

概要

Nuxt3 では、コンポーネントや Vue, Nuxt API などを import なしで読み込む、Auto importという機能が備わっています。 ただのグローバル宣言ではなく、型や IDE の補完などを維持した上で読み込めます。

Auto import を有効にする

設定を変更しなくとも、Auto import は有効になっており、機能を試すことができます。

ex. Vue の固有関数であるrefを Auto import

<script lang="ts" setup>
  const text = ref("");
</script>

デフォルトで Auto import が有効になっているもの

デフォルトで Auto import が有効になっているものとしては、 Vue, Nuxt の API と、

ユーザーが定義した以下のディレクトリのモジュールになります。

• components/
• composables/
• utils/

つまり、以下のようなファイルがあった場合、

utils
└── text.ts

utils/text.ts

export const buttonText = "ボタンテキスト";

importせずともcomponents/Button.vueでutilsディレクトリでエクスポートされた値を使用することができます。

<template>
  <button>{{ buttonText }}</button>
</template>

この時、utilsとcomposablesは、それぞれの直下のファイルのみ Auto import の対象とします。例えば、utils/const/text.tsのようなファイルを用意した場合、text.tsは直下のファイルではないので Auto import の対象外となります。

このようなファイルも Auto import の対象としたい場合は、次節で説明するようなAuto import 対象のディレクトリをカスタマイズする方法を参考にしてください。

Auto import 対象のディレクトリをカスタマイズする

Auto import 対象のディレクトリを変更・追加したい場合は、nuxt.config.tsのimports > dirsを修正することで実現できます。

  imports: {
    dirs: [
      "utils/**", // utils以下全てのファイルをAuto import対象に
      "clients",
    ],
  },

サードパーティパッケージの Auto import

nuxt.config.ts > imports > presetsを設定することで、サードパーティのパッケージも Auto import の対象に含めることができます。

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

Auto import されたファイルを確認する

何が Auto import の対象になっているか確認したい場合は、以下の型ファイルを見るといいでしょう。

• .nuxt/imports.d.ts : コンポーネント以外
• .nuxt/components.d.ts : コンポーネント

Auto import を無効にする

Auto import を無効にしたい場合は、nuxt.config.tsのimports > autoImportをfalseにします。

nuxt.config.ts

imports: {
  autoImport: false
},

さらにコンポーネントの Auto import も無効にしたい場合は、components > dirsを空配列に設定します。

nuxt.config.ts

components: {
  dirs: [];
}