「Nuxt.js」ライブラリsimple-m-editorをインストールしてmarkdownエディタを作成する

2022年7月18日

環境

Windows 10 Home 64bt
node v14.18.3
npm 6.14.15
yarn　1.22.17

1.Nuxt.jsを環境構築します
「nuxteditor」という名前でプロジェクトを作成してます

c:\nuxtdemo>npx create-nuxt-app nuxteditor

create-nuxt-appの設定を行います

create-nuxt-app v4.0.0
✨  Generating Nuxt.js project in nuxteditor
? Project name: nuxteditor
? Programming language: JavaScript
? Package manager: Yarn
? UI framework: None
? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Testing framework: None
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Server (Node.js hosting)
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? What is your GitHub username?
? Version control system: Git

環境構築の結果

Successfully created project nuxteditor

To get started:

      cd nuxteditor
      yarn dev

To build & start for production:

      cd nuxteditor
      yarn build
      yarn start

2.言語を設定します

プロジェクトnuxtappの配下にある「nuxt.config.js」を修正します
6行目　修正前
lang: 'en'
修正後
lang: 'jp'

3.simple-m-editorライブラリのインストール

>cd nuxteditor
>yarn add simple-m-editor
yarn add v1.22.17
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
warning "nuxt > @nuxt/components@2.2.1" has unmet peer dependency "consola@*".
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 3 new dependencies.
info Direct dependencies
└─ simple-m-editor@0.4.6
info All dependencies
├─ highlight.js@11.6.0
├─ marked@2.1.3
└─ simple-m-editor@0.4.6
Done in 96.10s.

4.pluginsを設定します
「nuxt.config.js」に以下コードを追加します

plugins: [
  {
    src: '@/plugins/plugin',
    mode: 'client'
  }
],

5.pluginsフォルダ作成、 plugins配下にplugin.jsを作成します。
以下のコードを編集します

import Vue from 'vue'
import mEditor from 'simple-m-editor'
import 'simple-m-editor/dist/simple-m-editor.css'

Vue.component('mEditor',mEditor)

6.simple-m-editor使い方
pagesフォルダの配下にindex.vueを編集します

<template>
  <div class="relative flex items-top">    
    <m-editor
      v-model="text"
      @on-change="handleChange"
    />
    <div class="m-editor-preview" v-html="markdownContent"></div>
  </div>    
</template>

<script>

export default {  
  data() {
    return {
      text: '',
      markdownContent: ''
    };
  },
  methods: {
    handleChange(data) {
      this.markdownContent = data.htmlContent
    }
  }
};
</script>

7.yarnを起動します

c:\nuxtdemo\nuxteditor>yarn dev
yarn run v1.22.17
$ nuxt

   ╭───────────────────────────────────────╮
   │                                       │
   │   Nuxt @ v2.15.8                      │
   │                                       │
   │   ▸ Environment: development          │
   │   ▸ Rendering:   server-side          │
   │   ▸ Target:      server               │
   │                                       │
   │   Listening: http://localhost:3000/   │
   │                                       │
   ╰───────────────────────────────────────╯

8.動作確認
ブラウザから http://プライベートIP:3000にアクセスします