【Nuxt.js】 Nuxt/content를 사용해 보았습니다.

소개

최근 Nuxt/content 를 처음 사용해 보았으므로, 자신의 기억 정착과 비망록을 위해 기사로 남겨두고 싶습니다.

(참고 사이트)
nuxt/content 공식

Nuxt/content란 무엇입니까?

Nuxt.js 앱 내에서 마크다운 방식을 사용할 수 있습니다.
마크다운 방식을 사용하고자 하는 파일은 content 디렉토리 바로 아래에 생성하고 끝에 .md를 붙입니다.

파일 구성

특정 제품 또는 사이트에 대한 설명과 함께 페이지를 작성한다고 가정합니다.

├ content
│　└ manuals
│　　├ 001.md
│　　└ 002.md
│
├ pages
│　└ manuals
│　　├ _slug.vue (詳細ページ)
│　　└ index.vue (一覧ページ)
└ index.vue

사용방법

1. Nuxt/content 설치

terminal.

$ npm install @nuxt/content

nuxt.config

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

2. pages/manuals/index.vue 만들기

파일 구성에서도 간단하게 표기하고 있습니다만, pages/manuals/index.vue 는, pages/manuals/_slug.vue 에의 링크를 올린 일람 페이지가 됩니다.

pages/manuals/index.vue

<template>
  <div>
    <h1>一覧ページ</h1>
    <ul>
      <li v-for="manual in manuals" :key="manual.slug">
        <!-- manual.slug はファイル名を表すので、リンクへ飛べる -->
        <nuxt-link :to="'/manuals/' + manual.slug">
          {{ manual.title }}
        </nuxt-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  async asyncData ({ $content }) {
    // content/manuals 直下のファイルを全て取得
    const manuals = await $content('manuals').fetch()
    return { manuals }
}
</script>

※ 마지막까지 실장을 하면 이와 같이 표시됩니다.

3. pages/manuals/_slug.vue 만들기

이 _slug.vue는 content/manuals/001.md 및 002.md를 읽습니다.
각 페이지가 표시됩니다.

pages/manuals/_slug.vue

<template>
  <div>
    <h1>{{ manuals.title }}</h1>
    <!-- nuxt-content で作成した、content/manuals 直下のファイルを読み込む -->
    <nuxt-content :document="manuals" />
  </div>
</template>

<script>
export default {
  async asyncData ({ $content, params }) {
    const manuals = await $content('manuals', params.slug || 'index').fetch()
    return { manuals }
  }
}
</script>

4. content/manuals 폴더를 만들고 몇 개의 파일을 만듭니다

content/manuals/manuals1.md 만들기

content/manuals/manuals1.md

---
title: マニュアル１
---
## サブタイトル
マニュアル1の説明文です。

content/manuals/manuals2.md 만들기

content/manuals/manuals2.md

---
title: マニュアル2
---
## サブタイトル
マニュアル2の説明文です。

요약

Nuxt/content 의 도입으로, 마크다운을 사용하는 것으로 글머리 기호가 사용하기 쉬운, 간단하게 Qiita의 투고 페이지와 같은 것을 작성할 수 있다는 점은 큰 이점이라고 느꼈습니다. 다만, 스타일을 맞추어 디자인을 조정하는 것을 생각하면, HTML 쪽이 융통이 효과가 있다고 하는 인상이었습니다.
어디까지나 개인적인 의견입니다만, 이하와 같이 정리합니다.

Nuxt/content

마크다운 기법을 사용할 수 있다

스타일은 일반적인 태그에 해당한다 (h1, p, ul 등)

같은 태그의 것에 대한 디자인의 구분이 효과가 없다

상대적으로 쉽고 간단한 사이트에 적합합니다

HTML

스타일은 각 태그와 각 클래스에 적용됩니다.

같은 태그의 것도 개별적으로 디자인됩니다

빽빽한 디자인으로 만들기에 적합

끝

이번에는 이상이 됩니다.
거친 기사가되어 버렸습니다만, 공식 페이지에는 다양한 옵션 등도 게재되고 있으므로, 용도에 맞추어 사용하면 좋다고 생각합니다.
나 자신 아직 아직 미숙하지만, 같은 입장에 조금이라도 도움이되면 다행입니다.
또, 만약 내용에 잘못 등이 있으면, 지적해 주시면 감사하겠습니다.