Nuxt ContentでVueのコンポーネントを読み込む

2020.09.22

md内で使うコンポーネントを作成
記事のslugを読み込めるようにする
画像を読み込む

Vue.jsのコンポーネントをマークダウン内で読み込めるのはNuxt Contentの魅力の1つ！😍

私は記事の画像の配置を以下のようなルールで行っています。

content/
  articles/
    sample-1.md
    home.md
satatic
  sample-1/
    01.png
    02.jpg
  home/
    01.png
    02.gif

マークダウン内で毎回 <img src="/sample-1/01.png" /> と書くのはめんどくさい。というわけで、Vueのコンポーネントを作成してもう少し楽をしてマークダウン内で読み込んでみます。

md内で使うコンポーネントを作成

Nuxt Contentのv1.4.0以降であれば components/global/ にコンポーネントを作成すればマークダウンから参照出来ます。

v1.4.0 と v2.13.0 から、コンポーネントを components/global/ ディレクトリに置くことができるようになり、ページ内でコンポーネントをインポートする必要がなくなりました。

コンテンツを作成する - Nuxt Contentより引用

「記事画像を楽に読み込める用のコンポーネント（ArticleImage.vue）」と「テスト用の記事」を追加します

components/
  global/
    ArticleImage.vue
content/
  articles/
    article-image-sample.md

ArticleImage.vue

<template>
  <p>ArticleImage</p>
</template>
 
<style scoped>
.sample {
  color: #00f;
}
</style>

article-image-sample.md

---
title: 記事の読み込みテスト
description:
---
 
↓↓↓ ここに記事の画像のコンポーネントを読み込む ↓↓↓
 
<article-image></article-image>
 
↑↑↑ ここに記事の画像のコンポーネントを読み込む ↑↑↑

Vueはパスカルケースでコンポーネントを作成しても自動でケバブケースになるんですね。

公式に書かれている点として読み込むコンポーネントは以下のルールがあります。

ケバブケースで参照する
セルフクローズタグは使えない
- 例えば <ArticleImage /> のようには書けない

コンテンツを作成する - Nuxt Content

記事のslugを読み込めるようにする

マークダウン内に書くコンポーネントはフロントマターで指定した値が使えます。同じくタイトルやslugなども渡す事が出来ます。

ここでは slug を渡します

ArticleImage.vue

<template>
  <p>ArticleImage</p>
  <p>{{ slug }}</p>
</template>
 
<script>
export default {
  props: ['slug'],
}
</script>
 
<style scoped>
.sample {
  color: #00f;
}
</style>

article-image-sample.md

↓↓↓ ここに記事の画像のコンポーネントを読み込む ↓↓↓
 
<article-image frontmatter={frontmatter}></article-image>
 
↑↑↑ ここに記事の画像のコンポーネントを読み込む ↑↑↑

画像を読み込む

参考用の画像を追加します

components/
  global/
    ArticleImage.vue
content/
  articles/
    article-image-sample.md
satatic
  article-image-sample/
    01.jpg

それぞれのファイルを編集

ArticleImage.vue

<template>
  <div>
    <img :src="`/${slug}/${name}`" :alt="alt" class="img" />
  </div>
</template>
 
<script>
export default {
  props: ['slug', 'name', 'alt'],
}
</script>
 
<style scoped>
.img {
  max-width: 100%;
}
</style>

article-image-sample.md

↓↓↓ ここに記事の画像のコンポーネントを読み込む ↓↓↓
 
<article-image frontmatter={frontmatter} name="01.jpg" alt="サンプル画像"></article-image>
 
↑↑↑ ここに記事の画像のコンポーネントを読み込む ↑↑↑

無事画像を読み込めるようになりました！

これで記事内で画像を読み込む責務を ArticleImage.vue に任せる事が出来ます。

例えば画像の保存先フォルダを変更し1階層深くしたい場合

satatic
  article-images/
    sample-1/
      01.png
      02.jpg
    home/
      01.png
      02.gif

ArticleImage.vue だけを変更すればよくなります。

ArticleImage.vue

<template>
  <div>
    <img :src="`/article-images/${slug}/${name}`" :alt="alt" class="img" />
  </div>
</template>
 
<script>
export default {
  props: ['slug', 'name', 'alt'],
}
</script>
 
<style scoped>
.img {
  max-width: 100%;
}
</style>