@nuxt/content
概要
ドキュメントをパースしてヘッドレスCMSみたいに配信してくれるやつ
Markdown, JSON, YAML および CSV ファイルに対応
デモ動画
https://res.cloudinary.com/nuxt/video/upload/v1588091670/nuxt-content_wxnjje.mp4
導入
ライブラリ追加
code:sh
$ yarn add @nuxt/content
モジュール記述
code:nuxt.config.js
/*
** Nuxt.js modules
*/
modules: [
'@nuxt/content'
],
（TSのみ）tsconfig.json に @nuxt/types および @nuxt/content 追加
Context 型に $content を適用させるため
code:tsconfig.json
{
"compilerOptions": {
"types": [
"@nuxt/types",
"@nuxt/content"
]
ドキュメントの置き場所
root 直下に /content ディレクトリを作成し、その中に置く
以下の例ではさらに /artist ディレクトリを挟んでいる
ページでの利用
asyncData({ $content }) などのフックで $content として参照
$content({ディレクトリの場所}).fetch() でフェッチ
ここでは _slug.vue と変数ルーティングを使っているので params.artist を参照している
ここでは doc に入れたので、nuxt-content タグで :document="doc" として展開
code:_slug.vue.ts
<template>
<nuxt-content :document="doc"></nuxt-content>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
async asyncData({ $content, params }) {
const doc = await $content(artists/${params.artist}).fetch()
return { doc }
}
})
</script>
できました
ちなみに自分の環境下だとデモ動画みたいに $content(slug || 'index') はうまくいかなかった
詳しくはドキュメント参照