はじめに
こんにちは、がんがんです。
Nuxt3 のmodulesを色々見ている時にNuxt Contentというモジュールに出会いました。
本記事ではnuxt/contentを用いてドキュメント環境の構築を行なっていきます。
この記事でやりたいこと
nuxt/contentを用いることで Vue3・Nuxt3 で Markdown、JSON、YAML ファイルを扱うことができ、Vue3 ベースのブログやドキュメントを簡単に構築することができます。
nuxt/content@v1.x時代に使われていた記事はチラホラありましたが、Nuxt3 対応の nuxt/content@v2.x についての記事がほとんど出会えませんでした。
前回執筆したDocusaurus 本の Docusaurus のように React ベースのライブラリは多いですが Vue ベースはあまり見かけません。
そのため、実際に実験して使ってみようと思います。
nuxt/content 関連の記事としては以下が非常に参考になります。
nuxt/content: 公式ドキュメント・GitHub
GitHub はこちらです。
環境構築: 新規プロジェクト作成
公式ドキュメントを参考にインストールを行います。
npx nuxi@latest init content-example -t content && \
cd content-example && npm i
開発モードで起動し http://localhost:3000 にアクセスします。nuxt/content 用のウェルカムページ(/content/index.md)が確認できたら大丈夫です。
npm run dev
環境構築: 既存プロジェクトへの追加
次に既存プロジェクトに対して @nuxt/content をインストールしnuxt.config.tsにmodulesを追加します。
npm i -D @nuxt/content
export default defineNuxtConfig({
...,
module: ["@nuxt/content"],
content: {
}
});
余談： nuxi init --template content の Template とは？
新規プロジェクト作成を行なった際、nuxi init <project name> -t(--template) contentを利用しました。
nuxi コマンドを利用する機会は多かったですがtemplateオプションがあることは知りませんでした。template 自体はどこに格納されているのか。調べてみました。
まずは公式ドキュメントのnuxi initAPI ガイドを確認します。
オプション説明には以下のように書かれています。どうやら GitHub のカスタムテンプレートも使えるようですね。これは非常に便利ですね。
Option Default Description --template, -t v3 Specify template name or git repository to use as a template. Format is gh:org/name to use a custom github template.
Nuxt3 デフォルトで使えるテンプレート自体は Starter Template リポジトリにありそうですね。
NUXI_INIT_REGISTRY: Set to a custom template registry. (learn more).
- Default registry is loaded from nuxt/starter/templates
GitHub のNuxt Starter Templatesのリポジトリを見る限り、結構複数のテンプレートがあります。テンプレート一覧に content もありましたね。
content の設定内容はnuxt/starter/templates/content.jsonにありました。
{
"name": "content",
"defaultDir": "nuxt-app",
"url": "https://content.nuxtjs.org",
"tar": "https://codeload.github.com/nuxt/starter/tar.gz/refs/heads/content"
}
では、デフォルトのNUXI_INIT_REGISTRYは何が設定されているのか？GitHub の奥地まで潜ってみましょう。
ありました。やはり/starter/templates/templatesが設定されてそうです。
MDC(MarkDown Components)を試す
サンプルで終わっては面白くないので、実際にドキュメントを作成してみます。next/content の特徴として MDC(MarkDown Components) があります。試しに追加してみます。
今回は公式サンプルのSlotsとInline methodを試します。
::hero
Default slot text
#description
This will be rendered inside the `description` slot.
::
::alert{type="info" icon="exclamation-circle"}
Oops! An error occurred
::
::alert{type="warning"}
The **alert** component.
::
<template>
<section>
<h1>
<slot />
</h1>
<slot name="description" />
</section>
</template>
<script setup>
defineProps(["type"]);
</script>
<template>
<div :class="[type]">
<ContentSlot :use="$slots.default" unwrap="p" />
</div>
</template>
<style scoped>
.info {
background-color: aqua;
}
</style>
実際の表示は以下のようになります。CSS の設定もきちんと反映されており、Markdown、Vue の連携出来ています。
さらなるテーマを求めて Nuxt Studio を覗く
自身でコンポーネントを実装し、CSS も実装したいという方は nuxt/content のみで問題なさそうですが、「リッチである必要はなく、でも簡単なテーマは欲しい」という方もいるかと思います。
そのような場合はNuxt Studioに掲載されている Nuxt テーマを使うと良いかもです。
個人的にはDocusが使いやすそうと感じています。機会を見つけてこちらも触ってみます。
Nuxt テーマについては下記記事でまとめられていましたのでそちらを合わせてご覧ください。
おわりに
Nuxt3 ベースのドキュメント環境を構築するため nuxt/content を触ってみました。
Vue3、Nuxt3 ベースの選択肢もどんどん増えてくると良いですね。Docus については別記事でまとめられたらと思います。
本日のサンプルは以下にまとめています。
Discussion
「module」ではなく「modules」ですかね、恐らく