開発: コンポーネント作成と Nuxt 互換性

解説：コンポーネント作成と Nuxt 互換性

新しいコンポーネントを追加・変更する際の、プロジェクト特有のルールとアーキテクチャについての解説です。

コンポーネントの配置

すべてのレイアウト・UIコンポーネントは、ルートの src/components/ 以下に配置してください。

型定義（サジェスト）の付与

UIライブラリ内のコンポーネントで Lism のプロパティ（p, m, fz など）をサジェストさせるため、以下の定型パターンで型を継承してください。

1. Props インターフェースの拡張

src/components/Lism/types.ts から LismCoreBaseProps をインポートし、extends します。

<script setup lang="ts">
import type { LismCoreBaseProps } from '../Lism/types'

// /* @vue-ignore */ をつけることで、サジェストを有効にしつつ 
// Vue のランタイム Props（defineProps）としては無視させることができます
export interface Props extends /* @vue-ignore */ LismCoreBaseProps {
  // コンポーネント固有のプロパティ
  allowMultiple?: boolean
}

defineProps<Props>()
</script>

2. テンプレートのルート要素を <Lism> にする

Props として受け取った属性（p や bgc など）を正しく LismCSS のクラス名やスタイルへ変換するために、テンプレートのルートは原則として <Lism> コンポーネントを使用してください。

<template>
  <Lism class="c--my-component">
    <slot />
  </Lism>
</template>

Nuxt モジュールでの解決ルール

Nuxt モジュール側では、ライブラリ全体の型定義とは別に、コンポーネントのソースコード実体（.vue）をスキャンして自動登録しています。

1. 拡張子の制限 (extensions: ['vue'])

src/components 内には、再エクスポート用の index.ts や型定義ファイルが混在しています。Nuxt の addComponentsDir がこれらを誤ってコンポーネントとして登録しないよう、.vue ファイルのみを対象にするように制限しています。

2. 堅牢なリソース解決 (Robust Loading)

モジュール側でのリソース解決（コンポーネント、CSS）は、resolvePath および existsSync を用いた堅牢な仕様になっています。モノレポ内でのパッケージ構築順序や、依存先が未ビルドである場合、または特定のディレクトリ（runtime/components 等）が存在しない場合でも、致命的なエラーを発生させずに安全にスキップ（または警告）するように設計されています。

コンポーザブルの管理 (src/composables)

useLismProps などの共通ロジックは src/composables ディレクトリで管理します。 これらはオートインポートの対象外であり、利用者は lism-ui-vue/composables から明示的にインポートして利用します。

3. 補助ファイルの扱い (vite.config.ts)

Accordion などの複雑なコンポーネントでは、同一ディレクトリに context.ts などの補助ファイルを置くことがあります。

  • 注意: これら補助ファイルもビルド後の配布パッケージ（dist/runtime/components）に含まれている必要があります。

  • 仕組み: vite.config.ts の writeBundle フックにて、.vue に加えて .ts, .mts などのファイルをコピーするように定義されています。

新しいコンポーネントの追加手順

  1. src/components/ に新しいディレクトリと .vue ファイルを作成。

  2. そのディレクトリの index.ts（もしあれば）からエクスポート。

  3. ルートの src/components/index.ts からエクスポート。

  4. テスト: apps/lism-ui-vue-nuxt/playground/ にて、そのコンポーネントが自動インポートされて正常に動作するかを確認。