Nuxt Contentでタグを使う

2020.09.24
Nuxt Contentでタグを使う

Nuxt Contentでタグをフロントマターを使って設定してみます。

tag-sample.md
---
title: タグのサンプル
description: 
tags:
  - tag-1
  - tag-2
---

このように設定すると

article.tags
// => ["tag-1", "tag-2"]

と取り出せるようになります。

タグ用のコンポーネントを追加

TagCollection.vueを追加します。

components/
  TagCollection.vue
TagCollection.vue
<template>
  <ul>
    <li v-for="tag in tags" :key="tag">{{ tag }}</li>
  </ul>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'

@Component
export default class TagCollection extends Vue {
  @Prop({ default: [] })
  tags: Array<string> | undefined
}
</script>

タグを表示する

記事の詳細ページにタグを表示します

pages/articles/_slug.vue
<template>
  <main>
    <h1 class="title">{{ article.title }}</h1>
    <TagCollection :tags="article.tags" />
    <nuxt-content :document="article" />
  </main>
</template>

<script lang="ts">
import TagCollection from '~/components/TagCollection.vue'
・・・

おすすめ