Nuxt ContentをNuxt.jsのプロジェクトに導入する(TypeScriptにも対応)

create-nuxt-app v3.5.2
✨  Generating Nuxt.js project in add-nuxt-content-sample
? Project name: add-nuxt-content-sample
? Programming language: TypeScript
? Package manager: Yarn
? UI framework: None
? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Linting tools: Prettier
? Testing framework: None
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Server (Node.js hosting)
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Continuous integration: None
? Version control system: Git

$ yarn add @nuxt/content

$ npm install @nuxt/content

$ npm ls --depth=0 | grep nuxt
2:├── @nuxt/content@1.13.1  //この行が表示される
3:├── @nuxt/types@2.14.12
・・・

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

{
  "compilerOptions": {
    ・・・
  },
  "types": [
    "@types/node",
    "@nuxt/types",
    "@nuxt/content"  //@nuxt/typesの後に追記
  ]
}

<script lang="ts">
import { Context } from '@nuxt/types'
 
export default {
  async asyncData({ $content, params }: Context) {
    const articles = await $content('articles').fetch()
・・・

content/
  articles/
    sample-01.md
    sample-02.md

---
title: sample-01のタイトル
description: Learn how to use @nuxt/content.
---
 
# h1 Heading
## h2 Heading
### h3 Heading
#### h4 Heading
##### h5 Heading
###### h6 Heading
 
## Emphasis
 
**This is bold text**
 
__This is bold text__
 
*This is italic text*
 
_This is italic text_
 
~~Strikethrough~~
 
## Blockquotes
 
 
> Blockquotes can also be nested...
>> ...by using additional greater-than signs right next to each other...
> > > ...or with spaces between arrows.
 
## Lists
 
Unordered
 
+ Create a list by starting a line with '+', '-', or '*'
+ Sub-lists are made by indenting 2 spaces:
  - Marker character change forces new list start:
    * Ac tristique libero volutpat at
    + Facilisis in pretium nisl aliquet
    - Nulla volutpat aliquam velit
+ Very easy!
 
Ordered
 
1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem at massa
 
 
1. You can use sequential numbers...
1. ...or keep all the numbers as '1.'
 
Start numbering with offset:
 
57. foo
1. bar

---
title: Introduction
description: Learn how to use @nuxt/content.
---

pages/
  articles/
    _slug.vue  //記事詳細
  index.vue  //記事一覧（トップページ

<template>
  <ul>
    <li v-for="article in articles" :key="article.slug">
      <nuxt-link :to="`/articles/${article.slug}`">
        {{ article.title }}
      </nuxt-link>
      <p>{{ article.updatedAt }}</p>
    </li>
  </ul>
</template>
 
<script lang="ts">
import { Context } from '@nuxt/types'
 
export default {
  async asyncData({ $content, params }: Context) {
    const articles = await $content('articles').fetch()
    return { articles }
  }
}
</script>

<template>
  <main>
    <h1>{{ article.title }}</h1>
    <nuxt-content :document="article" />
  </main>
</template>
 
<script lang="ts">
import { Context } from '@nuxt/types'
 
export default {
  async asyncData({ $content, params }: Context) {
    const article = await $content('articles', params.slug).fetch()
    return { article }
  }
}
</script>

async asyncData({ $content, params }: Context) {
  // 記事を全て取得する
  const articles = await $content('articles').fetch()
  // 記事をdataに設定する
  return { articles }
}

content/
  blogs/
    sample-01.md
    sample-02.md

async asyncData({ $content, params }: Context) {
  const article = await $content('articles', params.slug).fetch()
  return { article }
}