shared

共有/ディレクトリを使用して、Vue アプリと Nitro サーバー間で機能を共有します。

shared/ ディレクトリを使用すると、Vue アプリと Nitro サーバーの両方で使用できるコードを共有できます。

shared/ ディレクトリは Nuxt v3.14 以降で利用可能です。
shared/ ディレクトリ内のコードは、Vue または Nitro のコードをインポートできません。

使用方法

方法 1: 名前付きエクスポート

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

方法 2: デフォルトエクスポート

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

これで、Nuxt アプリと server/ ディレクトリで 自動インポートされた ユーティリティを使用できます。

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

<template>
  <div>
    {{ hello }}
  </div>
</template>
server/api/hello.get.ts
export default defineEventHandler((event) => {
  return {
    hello: capitalize('hello'),
  }
})

ファイルのスキャン方法

shared/utils/ および shared/types/ ディレクトリ内のファイルのみが自動インポートされます。これらのディレクトリのサブディレクトリ内にネストされたファイルは、これらのディレクトリを imports.dirs および nitro.imports.dirs に追加しない限り、自動インポートされません。

shared/utils および shared/types の自動インポートの動作とスキャン方法は、app/composables/ および app/utils/ ディレクトリと同じです。
Docs > 4 X > Guide > Directory Structure > App > Composables#how Files Are Scanned で詳細をご覧ください。
ディレクトリ構造
-| shared/
---| capitalize.ts        # Not auto-imported
---| formatters
-----| lower.ts           # Not auto-imported
---| utils/
-----| lower.ts           # Auto-imported
-----| formatters
-------| upper.ts         # Not auto-imported
---| types/
-----| bar.ts             # Auto-imported

shared/ フォルダーに作成するその他のファイルは、#shared エイリアス (Nuxt によって自動的に設定されます) を使用して手動でインポートする必要があります。

// For files directly in the shared directory
import capitalize from '#shared/capitalize'

// For files in nested directories
import lower from '#shared/formatters/lower'

// For files nested in a folder within utils
import upper from '#shared/utils/formatters/upper'

このエイリアスにより、インポートするファイルの場所に関係なく、アプリケーション全体で一貫したインポートが保証されます。

Docs > 4 X > Guide > Concepts > Auto Imports で詳細をご覧ください。