• #nuxt
  • #content
  • #routing
  • #frontmatter
未分類

Nuxt Content ルーティング仕様メモ（2025-10-02）

1. 基本ルール

  • コンテンツファイルは、apps/web/content/ 以下に配置する。
  • ファイル名（拡張子を除く）とディレクトリ構造が、そのまま URL パスになる。
    • 例: content/nuxt-content-mdx-setup-guide.md → /nuxt-content-mdx-setup-guide
    • 例: content/memo/2025-10-02/volta-setup.md → /memo/2025-10-02/volta-setup
  • content/index.mdx はトップページに表示される。

2. フロントマター

推奨フィールド:

title: タイトル
description: 概要
publishedAt: 発行日 (ISO 8601)
updatedAt: 更新日 (任意)
tags: [タグ1, タグ2]
status: draft | published
visibility: public | private

3. Vue 側のルーティング

  • app/pages/index.vue で / に ContentDoc path="/" を表示。
  • app/pages/[...slug].vue でその他のパスを受け、ContentDoc :path="route.path" で表示。
  • Not Found 時は簡易メッセージとトップへのリンクを返す。

4. コンテンツ追加手順

  1. content/ 配下に Markdown/MDX ファイルを作成。
  2. フロントマターに基本情報を記入。
  3. 必要であれば index.mdx にリンクを追加。
  4. npm run dev でプレビューし、URL パスを確認。

5. 参照