shared
VueアプリとNitroサーバー間で機能を共有するためにshared/ディレクトリを使用します。
shared/ ディレクトリは、VueアプリとNitroサーバーの両方で使用できるコードを共有するために使用します。
shared/ ディレクトリはNuxt v3.14+で利用可能です。
shared/ ディレクトリ内のコードは、VueやNitroのコードをインポートすることはできません。
使用方法
方法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 の自動インポートの動作とスキャン方法は、app/composables/ および app/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/4.x/guide/directory-structure/shared