カスタムVueページの追加方法

このガイドでは、pagesディレクトリにカスタムVueファイルを追加し、記事一覧に自動的に表示する方法を説明します。

概要

Nuxt Contentの記事（Markdown/MDX）とは別に、完全なVueコンポーネントとしてページを作成し、記事一覧に含めることができます。これにより以下のようなユースケースに対応できます：

インタラクティブなダッシュボード
複雑なフローチャートや図表
カスタムスタイリングが必要なページ
外部スクリプト（Mermaid、Chart.jsなど）を使用するページ

自動化の仕組み

app/pages/index.vueでは、以下のロジックでpagesディレクトリのVueファイルを自動的に検出します：

Nuxtのルーターから全ルート情報を取得
includeInList: trueが設定されたページのみを抽出
Nuxt Contentの記事と統合して一覧表示

手順

1. Vueファイルの作成

app/pages/配下に任意のディレクトリ構造でVueファイルを作成します。

例: app/pages/flowchart/customer-type-identification.vue

<template>
  <div>
    <h1>🔍 顧客タイプ判別フローチャート</h1>
    <!-- ページコンテンツ -->
  </div>
</template>

<script setup lang="ts">
// ページのメタ情報を定義（記事一覧に表示するため）
definePageMeta({
  title: '顧客タイプ判別フローチャート',
  publishedAt: '2025-10-03',
  tags: ['営業', '顧客対応', 'フローチャート'],
  includeInList: true  // ⭐ 重要: これを設定すると記事一覧に表示されます
})
</script>

<style scoped>
/* カスタムスタイル */
</style>

2. メタ情報の設定

definePageMeta()を使用してページ情報を設定します：

プロパティ	説明	必須
`title`	ページタイトル（一覧に表示）	はい
`publishedAt`	公開日（YYYY-MM-DD形式）	いいえ
`tags`	タグの配列	いいえ
`includeInList`	⭐ 記事一覧に含めるかどうか（必須）	はい

3. 自動検出の条件

⭐ 重要: includeInList: true を設定するだけで自動的に記事一覧に表示されます。

ディレクトリ構造やパスに制限はありません。任意の場所にVueファイルを配置し、definePageMeta() で includeInList: true を設定するだけで、一覧に表示されます。

実例: Mermaidフローチャートページ

<template>
  <div class="flowchart-container">
    <h1>📊 フローチャート</h1>
    <div id="mermaid-chart">
      <pre class="mermaid">
graph TD
    A[開始] --> B[処理1]
    B --> C[処理2]
    C --> D[終了]
      </pre>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'

definePageMeta({
  title: 'サンプルフローチャート',
  publishedAt: '2025-10-05',
  tags: ['フローチャート', 'mermaid'],
  includeInList: true
})

onMounted(() => {
  // Mermaidスクリプトを動的に読み込む
  const script = document.createElement('script')
  script.src = 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js'
  script.onload = () => {
    if (window.mermaid) {
      window.mermaid.initialize({ 
        startOnLoad: true,
        theme: 'default'
      })
      window.mermaid.run()
    }
  }
  document.head.appendChild(script)
})
</script>

<style scoped>
.flowchart-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}
</style>

注意事項

Nuxt Contentとの違い

特徴	Nuxt Content (MDX/MD)	カスタムVueページ
ファイル形式	`.md`, `.mdx`	`.vue`
配置場所	`content/`	`app/pages/`
一覧への追加	自動	メタ情報が必要
スタイリング	制限あり	完全な自由
外部スクリプト	制限あり	自由に使用可能