Vue3 + Viteで、コンポーネントからMarkdownファイルをインポートして表示する手順を紹介します。
まず、MarkdownをHTMLに変換するモジュールとしてmarkedをインストールします。
npm install marked
インストールが完了したら、以下のようなコンポーネントを作成します。
<script setup>
import { computed, ref } from 'vue'
import { marked } from "marked"
const markdown = ref("# Hello World!");
const parsedMarkdown = computed(() => {
return marked(markdown.value);
});
</script>
<template>
<div v-html="parsedMarkdown"/>
</template>
Markdownをそのまま文字列として変数として定義して、それをモジュールmarkedでパースしたものを画面に表示するといった感じです。
では、同じディレクトリに以下のようなMarkdownファイルを作成して、それを読み込み、表示する形に変更しましょう。
some-markdown.md
# Hello World!
<script setup>
import { computed, ref } from 'vue'
import { marked } from "marked"
import someMarkdown from "./some-markdown.md";
const parsedMarkdown = computed(() => {
return marked(someMarkdown);
});
</script>
<template>
<div v-html="parsedMarkdown"/>
</template>
上記の実装では、以下のようなエラーが発生して画面が表示されなくなります。
Uncaught SyntaxError: Invalid or unexpected token
まずは、コンポーネントにMarkdownを取り込むのに使用するモジュールvite-plugin-vue-markdownをインストールします。vite-plugin-vue-markdownは、Markdownファイルをロードして、そのままコンポーネントとして使用することができるモジュールです、
npm i vite-plugin-vue-markdown -D
ルートディレクトリにあるvite.config.jsを以下のように編集します。
vite.config.js
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import Markdown from "vite-plugin-vue-markdown";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue({
include: [/\.vue$/, /\.md$/],
}),
Markdown()
],
});
これでViteの設定は完了です。コンポーネントを以下のように編集しましょう。
<script setup>
import SomeMarkdown from "./some-markdown.md";
</script>
<template>
<SomeMarkdown/>
</template>
画面を再度確認してみると、問題なく外部のMarkdownファイルが読み込まれ、HTMLとして表示されていると思います！
こちらの記事でVue2でコンポーネントにMarkdownファイルを取り込む方法を紹介していますが、Vue3ではVue2では必要だったMarkdownをHTMLに変換する処理が必要ないので、記述量も少なくより分かりやすい見た目になっています。