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

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

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はパスカルケースでコンポーネントを作成しても自動でケバブケースになるんですね。

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

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

コンテンツを作成する - 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 :slug="slug"></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 :slug="slug" 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>

おすすめ