shared
VueアプリとNitroサーバー間で機能を共有するためにshared/ディレクトリを使用します。
shared/ ディレクトリは、VueアプリとNitroサーバーの両方で使用できるコードを共有することを可能にします。
shared/ ディレクトリはNuxt v3.14+で利用可能です。
shared/ ディレクトリ内のコードは、VueやNitroのコードをインポートすることはできません。
既存プロジェクトでの破壊的変更を防ぐため、Nuxt v3では自動インポートはデフォルトで有効になっていません。
これらの自動インポートされたユーティリティと型を使用するには、まず nuxt.config.tsでfuture.compatibilityVersion: 4を設定する必要があります。
使用方法
方法1: 名前付きエクスポート
export const capitalize = (input: string) => {
return input[0] ? input[0].toUpperCase() + input.slice(1) : ''
}
方法2: デフォルトエクスポート
export default function (input: string) {
return input[0] ? input[0].toUpperCase() + input.slice(1) : ''
}
これで、Nuxtアプリとserver/ディレクトリで自動インポートされたユーティリティを使用できます。
<script setup lang="ts">
const hello = capitalize('hello')
</script>
<template>
<div>
{{ hello }}
</div>
</template>
export default defineEventHandler((event) => {
return {
hello: capitalize('hello')
}
})
ファイルのスキャン方法
shared/utils/ と shared/types/ ディレクトリ内のファイルのみが自動インポートされます。これらのディレクトリのサブディレクトリ内にネストされたファイルは、imports.dirs と nitro.imports.dirs にこれらのディレクトリを追加しない限り、自動インポートされません。
shared/utils と shared/types の自動インポートの動作とスキャン方法は、composables/ および utils/ ディレクトリと同じです。
-| shared/
---| capitalize.ts # 自動インポートされない
---| formatters
-----| lower.ts # 自動インポートされない
---| utils/
-----| lower.ts # 自動インポートされる
-----| formatters
-------| upper.ts # 自動インポートされない
---| types/
-----| bar.d.ts # 自動インポートされる
shared/ フォルダ内に作成したその他のファイルは、Nuxtによって自動的に設定される#sharedエイリアスを使用して手動でインポートする必要があります：
// sharedディレクトリ直下のファイルの場合
import capitalize from '#shared/capitalize'
// ネストされたディレクトリ内のファイルの場合
import lower from '#shared/formatters/lower'
// utils内のフォルダにネストされたファイルの場合
import upper from '#shared/utils/formatters/upper'
このエイリアスは、インポートするファイルの場所に関係なく、アプリケーション全体で一貫したインポートを保証します。
こちらも参照 guide > concepts > auto-imports※このページは Nuxt.js 公式ドキュメントの翻訳ページ（非公式）です。
公式ドキュメントの該当ページはこちら：
https://nuxt.com/docs/3.x/guide/directory-structure/shared