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/ ディレクトリに置くことができるようになり、ページ内でコンポーネントをインポートする必要がなくなりました。
「記事画像を楽に読み込める用のコンポーネント（ArticleImage.vue）」と「テスト用の記事」を追加します
components/
global/
ArticleImage.vue
content/
articles/
article-image-sample.mdArticleImage.vue
<template>
<p>ArticleImage</p>
</template>
<style scoped>
.sample {
color: #00f;
}
</style>article-image-sample.md
---
title: 記事の読み込みテスト
description:
---
↓↓↓ ここに記事の画像のコンポーネントを読み込む ↓↓↓
<article-image></article-image>
↑↑↑ ここに記事の画像のコンポーネントを読み込む ↑↑↑
Vueはパスカルケースでコンポーネントを作成しても自動でケバブケースになるんですね。
公式に書かれている点として読み込むコンポーネントは以下のルールがあります。
- ケバブケースで参照する
- セルフクローズタグは使えない
- 例えば
<ArticleImage />のようには書けない
- 例えば
記事の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.gifArticleImage.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>
