Nuxt3에서 마크다운 파일을 읽어 페이지에 띄우기

Nuxt3 에서 마크다운 파일을 읽은 다음 페이지에 띄우는 작업을 하였습니다.

이 작업을 하는 이유

해당 블로그 포스트를 .md 파일로 작성한 후 편하게 포스트로 띄우고 싶었음

1. plugin 설치하기

마크다운 파일을 읽을 수 있는 plugin을 설치합니다.

:npm
$ npm i @kangc/v-md-editor@next -S

:yarn
$ yarn add @kangc/v-md-editor@next

2. nuxt3에 markdown plugin 등록하기

nuxt3은 root폴더 안 plugins 폴더에 등록하고 싶은 플러그인을 파일로 정의하면 플러그인이 등록됩니다.

등록할 플러그인은 v-md-editor 플러그인과 v-md-preview 플러그인 입니다.

해당 코드를 [root]/plugins/ 폴더 안에 작성합니다.

plugin_folder

// plugins/v-md-editor.js
import VMdEditor from '@kangc/v-md-editor';
import vuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress.js';
import Prism from 'prismjs';
import '@kangc/v-md-editor/lib/style/base-editor.css';
import '@kangc/v-md-editor/lib/theme/style/vuepress.css';
import 'prismjs/components/prism-json';

export default defineNuxtPlugin((nuxtApp) => {
  VMdEditor.use(vuepressTheme, {
    Prism
  });
  nuxtApp.vueApp.use(VMdEditor);

// plugins/v-md-preview.js
import VMdPreview from '@kangc/v-md-editor/lib/preview';
import vuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress.js';
import Prism from 'prismjs';
import '@kangc/v-md-editor/lib/style/base-editor.css';
import '@kangc/v-md-editor/lib/theme/style/vuepress.css';
import 'prismjs/components/prism-json';

export default defineNuxtPlugin((nuxtApp) => {
  VMdPreview.use(vuepressTheme, {
    Prism,
  });
  nuxtApp.vueApp.use(VMdPreview);
});

3. preview 컴포넌트 불러오기 + fs 모듈 사용하여 .md 파일 읽기

preview 컴포넌트를 선언한 후, server-side 에서 fs 모듈을 호출한 후 ref를 이용하여 컨텐츠를 넣어줍니다.

<template>
  <v-md-preview :text="text" />
</template>

<script setup>

  // server-side
  if (process.server) {
    const fs = await import("fs");
    const content = fs.readFileSync(`posts/content.md`, "utf8");
    text.value = content;
  }
</script>

결과

plugin_folder