🐮

Nuxt Content v3を使用してブログを構築する

2025/06/28に公開

Nuxt Contentとは

Nuxt ContentとはNuxt上でmarkdownをはじめとした各種ドキュメントを管理するためのプラグインで、markdownを記述するだけでページの公開や更新をすることが簡単に対応できます。

https://content.nuxt.com/

Install & Setup

以下を叩いてインストールします。

npm install @nuxt/content

インストールが完了したら、nuxt.config.tsのmodulesの項目にNuxt Contentを追加します。

export default defineNuxtConfig({
  modules: ['@nuxt/content']
})

追加が完了したら、content.config.tsをプロジェクトルートディレクトリに作成し、以下を入力します。

import { defineContentConfig, defineCollection } from '@nuxt/content'

export default defineContentConfig({
  collections: {
    content: defineCollection({
      type: 'page',
      source: '**/*.md'
    })
  }
})

このcollectionsはWordPressでいうカスタム投稿タイプみたいな認識で、各投稿タイプはどこのファイルを参照するかを指定することができます。他にもカスタムフィールドの設定もここで行うことが可能です。
上記ではcontentというcollectionを作成しております。

記事一覧の取得

例えばページに記事一覧を取得する場合は以下のqueryを<script></script>内で実行します。

<script setup>
const { data: contents } = await useAsyncData('content', () => {
  return queryCollection('content').all()
})
</script>
<template>
  <ul v-if="contents">
    <NuxtLink
      v-for="content in contents"
      :to="content.path"
      :key="content.id"
    >
      <li>{{ content.title }}</li>
    </NuxtLink>
  </ul>
</template>

queryCollection()は先程content.config.tsで設定したコレクションから取得をするための関数です。
よくNuxtContentの記事でqueryContent()でデータを取得する記事が出てきますが、そちらはv2系のもので、Nuxt Content v3ではqueryCollection()に置き換わっているようです。

その後の.all()は該当するすべての記事を取得するための関数です。今回はcontentに属するすべての記事を取得していますが、ここに関数を追加することで絞り込みや順番のソートなどが可能です。

記事詳細の取得

記事詳細も記事一覧と同様にqueryを<script></script>内で実行します

<script setup>
import ContentH1 from '~/components/Content/H1.vue';
import ContentH2 from '~/components/Content/H2.vue';
import ContentH3 from '~/components/Content/H3.vue';

const route = useRoute()
const { data: post } = await useAsyncData(route.path, () => {
  return queryCollection('posts').path(route.path).first()
})
</script>
<template>
  <div v-if="post">
    <h1>{{ post.title }}</h1>
    <ContentRenderer
      :value="post"
      :components="{
        h1: ContentH1,
        h2: ContentH2,
        h3: ContentH3,
      }"
    />
  </div>
</template>

取得については基本的に記事一覧の時と一緒ですが、記事詳細では現在のパスを元に取得をするため.path()が追加されています。

記事の表示ですが、markdownの情報を<ContentRenderer />コンポーネントに渡すことで詳細の表示ができます。
その際のそれぞれのStyleですが、<ContentRenderer />にはコンポーネントを渡すことができるので、該当のタグにそれぞれコンポーネントを渡します。

デプロイ

基本的にNuxtと同じですが環境によっては個別の設定が必要になることがあるようです。

自分はNetlifyを使用していたのですが、Nuxt Content内で使用されているsqlite3がnode.js 20.x以降でないと動作しないためnodeのバージョンを変更する必要がありました。

そのほかの環境についての個別設定についても公式ドキュメントに掲載されています。

所感

割とハマりどころが多かったですが、慣れればWordPressの代わりとして簡単なWebサイト開発であれば使用できそうだなと思いました。