Nuxt에 태그 편집기 포함

설치하다.

npm install vue-simplemde --save

plugens의 부하인nuxt-simplemde-plugen.js 만들기

import Vue from 'vue'
import VueSimplemde from 'vue-simplemde'
import 'simplemde/dist/simplemde.min.css'

Vue.component('vue-simplemde', VueSimplemde)

nuxt.config.js에 추가

module.exports = {
   // some nuxt config...
   plugins: [
     { src: '~plugins/nuxt-simplemde-plugin.js', mode: 'client' },
   ],
   css: [
     'simplemde/dist/simplemde.min.css',
   ],
};

어셈블리에서 사용

<template>
   <div class="wrap">
     <client-only>
       <vue-simplemde v-model="content" />
     </client-only>
   </div>
</template>

<script>
export default {
   data() {
     return {
       content: ''
     }
   }
}
</script>

태그 편집기 사용자화

<template>
   <div class="wrap">
     <client-only>
       <vue-simplemde v-model="content" :configs="configs" />
     </client-only>
   </div>
</template>

<script>
export default {
   data:() =>( {
       content: '',
       configs: {
         autosave: {
           enabled: false
         },
         initialValue: '',
         toolbar: [
           'preview',
           '|',
           'bold',
           'italic',
           'heading',
           'heading-smaller',
           'heading-bigger',
           '|',
           'code',
           'quote',
           'link',
           '|',
           'unordered-list',
           'ordered-list',
           'table',
           'horizontal-rule',
           '|',
           'guide'
         ]
       }
   })
}
</script>