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に変換する処理が必要ないので、記述量も少なくより分かりやすい見た目になっています。