Nuxt.js 3のAuto-Import機能

Nuxt.js 3は、開発者がVueコンポーネント、Composables、JavaScriptのユーティリティをより簡単に使用できるようにするための強力なAuto-Import（自動インポート）機能を提供します。この機能により、開発者はVueのAPIやNuxtのComposablesを明示的にインポートする必要がなくなり、コードの冗長性が減少し、開発プロセスがスムーズになります。

Auto-Importのメリット

• コードの簡素化: 頻繁に使用されるAPIやComposablesを毎回インポートする必要がなくなり、コードがより読みやすく、簡潔になります。
• 開発の迅速化: インポートを忘れることによるエラーが減少し、開発者は機能の実装により集中できるようになります。

具体例: Auto-Importを使用した開発

Vue 3 ComposablesのAuto-Import

Vue 3のComposables、例えばrefやreactiveなどは、Nuxt.js 3プロジェクトでは自動的にインポートされるため、以下のように直接使用できます。

<template>
  <div>{{ count }}</div>
  <button @click="increment">Increment</button>
</template>

<script setup>
const count = ref(0) // `ref`を明示的にインポートする必要はありません

function increment() {
  count.value++
}
</script>

Nuxt 3 Specific ComposablesのAuto-Import

Nuxt.js 3特有のComposablesも自動的にインポートされます。例えば、useRouterやuseRouteなどのルーティング関連のComposablesを、追加のインポートなしで直接使用できます。

<script setup>
const router = useRouter() // `useRouter`を明示的にインポートする必要はありません
const route = useRoute() // `useRoute`を明示的にインポートする必要はありません

function navigateToHome() {
  router.push('/')
}
</script>

Auto-Import設定のカスタマイズ

Nuxt.js 3では、プロジェクトのnuxt.config.ts（またはnuxt.config.js）ファイルを通じて、Auto-Importの動作をカスタマイズすることも可能です。例えば、特定の外部ライブラリやプロジェクト内で定義されたComposablesを自動的にインポートするように設定できます。

// nuxt.config.ts
export default defineNuxtConfig({
  autoImport: {
    // カスタム設定をここに追加
  }
})

フォルダ単位のAuto-Import機能: Composables, Utils, Middleware

Nuxt.js 3では、composables, utils, middlewareといった予め定められたフォルダに配置されたファイルは、プロジェクト内のどこからでも自動的にインポートされるようになっています。これにより、開発者はこれらのカスタム機能をより簡単に再利用できるようになります。

Composables

composablesフォルダは、Vue 3のComposition APIを使用して作成された再利用可能なロジックを格納するために使用されます。これらのComposablesは、プロジェクト内の任意のコンポーネントから自動的にインポートして使用できます。

具体例: カスタムComposableの作成と使用

1. composables/useCounter.jsを作成します。

   import { ref } from 'vue'
   
   export function useCounter() {
     const count = ref(0)
     const increment = () => {
       count.value++
     }
     return { count, increment }
   }
   

   Copy to clipboard
2. コンポーネント内でuseCounterを直接使用します。

   <template>
     <button @click="increment">{{ count }}</button>
   </template>
   
   <script setup>
   const { count, increment } = useCounter()
   </script>
   

   Copy to clipboard

Utils

utilsフォルダは、プロジェクト全体で共有されるユーティリティ関数を格納します。これらの関数も自動的にインポートされ、どのコンポーネントからも簡単に呼び出すことができます。

具体例: ユーティリティ関数の作成と使用

1. utils/formatDate.jsを作成します。

   export function formatDate(date) {
     return new Date(date).toLocaleDateString('ja-JP')
   }
   

   Copy to clipboard
2. 任意のコンポーネントでformatDate関数を使用します。

   <template>
     <div>{{ formattedDate }}</div>
   </template>
   
   <script setup>
   const date = new Date()
   const formattedDate = formatDate(date)
   </script>
   

   Copy to clipboard

Middleware

middlewareフォルダには、ページやグループのページに適用される前に実行される関数を配置します。これらのミドルウェア関数も自動的にプロジェクトに認識され、特定のルーティングロジックに簡単に組み込むことができます。

具体例: ミドルウェアの作成と適用

1. middleware/authCheck.jsを作成します。

   export default defineNuxtMiddleware((context) => {
     const userIsAuthenticated = false // 実際の認証ロジックに置き換える
     if (!userIsAuthenticated) {
       return navigateTo('/login')
     }
   })
   

   Copy to clipboard
2. 特定のページにミドルウェアを適用します。

   <script setup>
   definePageMeta({
     middleware: 'authCheck'
   })
   </script>
   
   <template>
     <div>このページは認証が必要です。</div>
   </template>
   

   Copy to clipboard