Nuxtのsharedディレクトリとは？

Nuxt 3.14以降で利用可能なshared/ディレクトリは、Vueアプリケーション（クライアントサイド）とNitroサーバー（サーバーサイド）間でコードを共有できる仕組みです。これにより、同じユーティリティ関数や型定義を両環境で重複なく使い回せるため、開発効率が大幅に向上します。

従来はクライアント用とサーバー用で別々にコードを管理したり、共通コードを外部パッケージ化する必要がありましたが、shared/ディレクトリを使うことでNuxtプロジェクト内でシームレスに共有可能です。

まず結論：sharedディレクトリのポイント

• VueアプリとNitroサーバー間でコードを共有できる
  ユーティリティ関数や型定義を一箇所にまとめて管理可能。

• shared/utils と shared/types 配下のファイルは自動インポート対応
  ただし、サブディレクトリは自動インポートされないため注意。

• shared/内のコードはVueやNitro固有のAPIを使えない
  純粋なユーティリティや型定義に限定される。

• 既存プロジェクトでは自動インポートはデフォルト無効
  nuxt.config.tsでfuture.compatibilityVersion: 4を設定する必要あり。

• #sharedエイリアスで手動インポートも可能
  自動インポート対象外のファイルはこのエイリアス経由で読み込む。

いつ使うべきか？使わない方がよいケースは？

使うべきケース

• クライアントとサーバー両方で同じロジック（例：文字列操作、日付フォーマット、バリデーション関数など）を使いたいとき。
• 型定義を共通化して型安全を保ちたいとき。
• コードの重複を避けてメンテナンス性を高めたいとき。

使わない方がよいケース

• VueのリアクティブAPIやNitroのサーバー専用APIを使うコードはshared/に置けません。
  これらはcomposables/やserver/など適切なディレクトリに分けましょう。

• 自動インポートの恩恵を受けたい場合は、shared/utilsやshared/types直下にファイルを置く必要があります。
  サブディレクトリに深くネストしたい場合は手動インポートが必要です。

実務でよくあるユースケースとサンプルコード

1. 文字列操作ユーティリティの共有

// shared/utils/capitalize.ts
export const capitalize = (input: string) => {
  return input[0] ? input[0].toUpperCase() + input.slice(1) : ''
}

• クライアント側で表示用に使う

<script setup lang="ts">
const hello = capitalize('hello')
</script>

<template>
  <div>{{ hello }}</div> <!-- 出力: Hello -->
</template>

• サーバー側APIでレスポンスに利用

// server/api/greet.get.ts
export default defineEventHandler(() => {
  return { message: capitalize('welcome') }
})

2. 型定義の共通化

// shared/types/user.d.ts
export interface User {
  id: number
  name: string
  email: string
}

• クライアントとサーバーで同じUser型を使い、型の不整合を防止。

3. 日付フォーマット関数の共有

// shared/utils/formatDate.ts
export function formatDate(date: Date): string {
  return date.toISOString().split('T')[0]
}

• クライアントのUI表示やサーバーのログ出力で共通利用。

よくある落とし穴・注意点

1. VueやNitro固有APIは使えない

shared/内のコードは純粋なユーティリティや型定義に限定されます。Vueのrefやcomputed、NitroのdefineEventHandlerなどは使えません。これらを使うコードはcomposables/やserver/に分けてください。

2. 自動インポートの範囲に注意

shared/utilsとshared/types直下のファイルのみ自動インポートされます。サブディレクトリに置いたファイルは自動インポートされないため、nuxt.config.tsのimports.dirsやnitro.imports.dirsに追加するか、#sharedエイリアスで手動インポートしてください。

3. 既存プロジェクトでの互換性

Nuxt 3の既存プロジェクトでは自動インポートはデフォルト無効です。nuxt.config.tsでfuture.compatibilityVersion: 4を設定しないと自動インポートが使えません。設定を忘れると意図した動作にならず混乱することがあります。

4. SSRとHydrationの観点

shared/のコードはサーバー・クライアント両方で動作するため、状態を持つコードや副作用のある処理は避けましょう。状態管理や副作用はVueのライフサイクルやNitroのAPIハンドラで適切に分離してください。

まとめ

Nuxtのshared/ディレクトリは、VueアプリとNitroサーバー間で純粋なユーティリティ関数や型定義を安全かつ効率的に共有できる強力な仕組みです。これによりコードの重複を減らし、メンテナンス性と型安全性を向上させられます。

ただし、VueやNitro固有のAPIは使えない制約があるため、用途に応じてshared/と他のディレクトリを使い分けることが重要です。自動インポートの範囲や既存プロジェクトでの設定にも注意しながら活用しましょう。

Nuxtプロジェクトのコード共有をスマートに実現したい開発者にとって、shared/はぜひ押さえておきたい機能です。