Nuxt.js Markdown 구현하기

Markdown 구현하기

tui 모듈 사용

1. npm install --save @tui-nuxt/editor

2. nuxt.config.js 파일에 모듈을 추가한다.

modules: [ '@tui-nuxt/editor' ],
tui: { editor: {} },

3. tui.vue 페이지를 생성한다.

<template>
  <div id="top">
  	<TuiEditor
      mode="markdown"
      preview-style="vertical"
      height="300px"
    />
    
    <TuiEditorViewer 
      :value="content"
    />
  </div>
</template>
<script>
export default {
	data() {
    	return {
        	content: 'Hello World!'
        }
    }
}
</script>

<style scoped>

</style>

해당코드를 입력하면 Toast Ui Editor 가 나타납니다.

Plugins 사용하기

1. npm install @toast-ui/vue-editor

2. plugins 디렉토리에 tui-editor.js 파일 생성하기

import Vue from 'vue'
import 'codemirror/lib/codemirror.css';
import '@toast-ui/editor/dist/toastui-editor.css';
import '@toast-ui/editor/dist/i18n/ko-kr';

import '@toast-ui/editor/dist/toastui-editor-viewer.css';

import { Editor, Viewer } from '@toast-ui/vue-editor';

Vue.component('editor', Editor)
Vue.component('viewer', Viewer)

3. plugin 사용을 위해 nuxt.config.js 파일에 플러그인을 추가해준다.

plugins: [ { src:"~plugins/tui-editor.js", ssr:false } ]

4. tui.vue 파일을 작성한다.

해당 코드를 입력하면 Toast Ui Editor 를 사용할수있게되며 아래와 같이 나온다.