Nuxt Contentでタグを使う

2020.09.23

タグ用のコンポーネントを追加
タグを表示する

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'
・・・