t8.dev

🇺🇸

【サンプル有】@nuxt/contentを1ページでざっくり理解する

公開日:2021/08/12
更新日:

@nuxt/contentとは?

心理学を使ったTODOアプリを開発している、@takasqrです。

心理学を使ったTODOアプリ | todo8

心理学を使ったTODOアプリ | todo8

NUXTのコンテンツ管理用のモジュールです。

/contentの中にmarkdownファイルを置くと、vueコンポーネントの中で取り出して表示したりできます。

ブログやドキュメントページと相性がいいと思います。

ファイル形式は、

  • JSON
  • YAML
  • XML
  • CSV
  • Markdown

に対応しています。

markdownの他にも対応しているようですね。

@nuxt/contentのメリット

メリットは公式ページで紹介されていますが主に、

  • Markdownの中でVueコンポーネントを使うことができる
  • 全文検索
  • SSG対応(nuxt generate)
  • コードブロックのシンタックスハイライト(PrismJS)
  • 目次の生成が可能

といったメリットがあります。

導入

インストール

@nuxt/contentをインストールします。

npm install @nuxt/content

nuxt.config.js

nuxt.config.jsを編集します。

{
  modules: [
    '@nuxt/content'
  ],
  content: {
    // Options
  }
}

使い方

コンテンツ管理(markdown)

Markdownでコンテンツを管理する方法を紹介します。

  1. プロジェクト直下に/contentディレクトリを作る
  2. /contentの中に.mdファイルを作る
  3. .mdファイルの中にフロントマターを追加する
  4. フロントマターの下にコンテンツを書いていく

こんな感じで書いていきます。

---でくくってある部分がフロントマターです。

---
title: 2021年7月サイト運営レポート
description: 2021年7月の振り返りです。
slug: 202107
created: 2021/08/01
updated: 
img: first-blog-post.jpg
alt: my first blog post
---
## ふりかえり
7月のはじめにこのサイトを作ってから、更新作業は全然できませんでした。
でもある程度、サイトのネタになりそうな本を読んでメモにまとめたりできたのでよかったです。

後は、ずっとやりたかったDockerコンテナを使った、vscodeの開発環境を作ることができました。

データ取得

コンテンツファイルを作ったら、Vueコンポーネントの中で取得していきます。

コンテンツ一覧を表示するコード。

<template>
  <div>
    <h1>記事一覧</h1>
    <ul>
      <li v-for="article of articles" :key="article.slug">
        <NuxtLink :to="'post' + article.path">
          <div>
            <h2>{{ article.title }}</h2>
          </div>
        </NuxtLink>
        <p>{{ article.created }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  async asyncData ({ $content }) {
    const articles = await $content()
      .only(['title', 'slug', 'path', 'created'])
      .sortBy('created', 'desc')
      .fetch()
    return {
      articles
    }
  }
}
</script>

コンテンツを表示するコード。

<template>
  <article>
    <div v-if="document.image">
      <v-img
        :src="`/cover-image/${document.image}`"
      />
    </div>
    <div v-if="document.created || document.updated">
      <div v-if="document.created">
        公開日:{{ document.created }}
      </div>
      <div v-if="document.updated">
        更新日:{{ document.updated }}
      </div>
    </div>
    <div>
      <h1>{{ document.title }}</h1>
    </div>
    <nuxt-content
      :document="document"
    />
  </article>
</template>

<script>
export default {
  async asyncData ({ $content, params }) {
    const documents = await $content().where({ slug: params.slug }).fetch()
    const document = documents[0]
    return {
      document
    }
  }
}
</script>

その他いろいろ

@nuxt/content-theme-docs

@nuxt/content-theme-docsは@nuxt/contentを使って簡単にドキュメントサイトを作れるテンプレートです。

こんな感じのサイトを数秒で作れます。

npx create-nuxt-content-docs <project-name>

かなり技術ドキュメントよりのデザインですが、本当に簡単に始められます。

ブログを作る公式チュートリアル

技術ドキュメントじゃなくて、ブログを作りたい人はこのページがNUXT公式のチュートリアルになります。

英語のページですが、デモページやソースコードの紹介されているのでおススメです。

Create a Blog with Nuxt Content

さいごに

Litelyも@nuxt/contentを使って作っています。 公式ドキュメントも非常にわかりやすいです。

Markdownで記事を管理できるのは楽なのでおススメです。

関連記事

Nuxt3にBridgeを使って移行してみる【Nuxt2→3】
【Nuxt】create-nuxt-appをインストールして始める
NUXTの開発環境をVSCodeとDockerで作る
【サンプル有】@nuxt/i18nで多言語対応する
【サンプル有】Nuxtでhead内にmetaタグを出力する2つの方法
NUXTで作ったWebサイトの表示速度を高速化する

オススメ記事

5年間ほぼ毎日プログラミングの勉強をするためにやったこと
論文と本から学ぶ、プログラミング独学のコツ
目標達成率を高める if thenプランニングとは!?【本とアプリも紹介】