技術仕様：Nuxt モジュール

Lism UI Vue は Nuxt 4 (および 3) 向けのモジュールを提供し、コンポーネントの自動インポートをサポートしています。

インストール

Lism UI Vue の Nuxt モジュールは独立したパッケージとして提供されています。

npm install @lism-ui-vue/nuxt@alpha

デザインシステムと CSS

モジュールを有効にすると、プロジェクトに自動的に以下の CSS が追加されます。

• lism-ui-vue/style: Lism UI Vue コンポーネント用のスタイル

• lism-css/main.css: Lism CSS コアスタイル

堅牢な CSS 読み込み

CSS の読み込み前にパッケージの解決とファイルの存在確認を行います。モノレポ開発時や特定のパッケージが未ビルドの状態でもエラーで中断せず、解決に失敗した場合は console.warn で通知されます。

モジュールオプション

nuxt.config.ts の lism キーで以下の設定が可能です。

verbose オプション

モジュールの setup 時における詳細なデバッグログ（解決パスの確認など）を出力するかどうかを制御します。

• デフォルト: false

• true に設定すると、コンポーネントの検索パスなどの情報を console.log に出力します。

skipCss オプション

テスト環境などで Lism のスタイルシートの読み込みをスキップしたい場合に設定します。

• デフォルト: false

export default defineNuxtConfig({
  lism: {
    verbose: true,
    skipCss: false
  }
})

サーバーサイドレンダリング (SSR) の安定性

Lism UI Vue は SSR 環境（Nitro）でも安定して動作するように設計されています。

1. バンドルの透過設定 (Transpile)

LismCSS のロジック（getLayoutProps 等）が SSR バンドル時に正しく解決されるよう、lism-css および lism-ui-vue を build.transpile に自動的に追加します。これにより、Nitro エンジンがこれらのパッケージを外部依存としてではなく、バンドルの一部として処理し、500 エラーを防止します。

2. コンポーネントの解決と自動インポート

apps/lism-ui-vue-nuxt/src/module.ts にて、addComponentsDir を利用してライブラリ内のコンポーネントをスキャン・登録しています。

パッケージ解決の仕組み (Robust Path Logic)

本プロジェクトはモノレポ構成であり、開発環境（Playground）とビルド後の配布パッケージの両方で正しく動作する必要があります。

1. 実行環境の判別: 実行中のモジュールが node_modules 内にあるか（外部利用）、あるいはモノレポ内で直接実行されているか（開発・テスト）を自動判別します。

2. エントリポイントからの推論: @nuxt/kit の resolvePath を使用し、lism-ui-vue パッケージのエントリポイントを特定します。

3. 環境に応じた優先順位:

   • モノレポ内開発時: nuxt.options.dev が true かつモノレポ内であれば、src/components（ソースコード）を優先して参照します。

   • 外部 npm 利用時: node_modules 経由でインストールされている場合は、nuxt.options.dev の状態に関わらず、常に dist/runtime/components（ビルド済み成果物）を参照します。これにより、ユーザー環境にソースコードが存在しない場合でも確実にコンポーネントを読み込めます。

4. フォールバック: resolvePath が失敗する特殊な環境（pnpm link 等）でも、import.meta.url を起点とした物理パス解決を自動で行い、リソースを特定します。

コンポーザブルの利用

コンポーザブルは、オートインポートの対象外です（グローバルな名前空間の衝突を避けるため）。 利用する際は、独立したサブパスから手動でインポートしてください。

import { useTest } from 'lism-ui-vue/composables'

名称競合の回避と拡張子制限

Lism UI Vue では、コンポーネントディレクトリ内に index.ts（再エクスポート用）と .vue ファイル（実体）が混在している場合があります。これをそのままスキャンすると、Nuxt が同一名のコンポーネントを 2 つ見つけてしまい警告が発生します。これを回避するため、以下の設定を行っています。

• extensions: ['vue']: .vue ファイルのみをスキャンの対象とします。これにより、.ts ファイル（index.ts や types.ts）を無視し、意図したコンポーネントのみが登録されます。

ビルド成果物の依存関係

.vue コンポーネントが依存する補助ファイル（例: AccordionRoot.vue が依存する context.ts）を正しく参照できるように、ビルド（Vite）時にこれら補助ファイルも dist/runtime/components 内にコピーする設定を行っています。

自動インポート (Auto-Imports)

内部コンポーネント

モジュール自身の runtime/components が存在する場合、その中の補助的なコンポーネントを自動的にインポート対象として登録します。 これらディレクトリの読み込み前には existsSync による存在確認を行い、ディレクトリが欠けている場合でも安全にスキップされるようになっています。