nuxt3でマークダウンエディタを使う

BoskampiによるPixabayからの画像 NuxtJS
BoskampiによるPixabayからの画像
この記事は約2分で読めます。

最近は個人的にnuxt3をよく触っています。練習としてちょっとしたアプリを作っているのですが、何らかの文書をマークダウンで扱えると文書構造を表現できて便利です。そこで、今回はnuxt3でマークダウンエディタを扱ってみます。

nuxt3(vue3)でも使えるマークダウンエディタを探したところ、EasyMarkDown Editorというライブラリがシンプルで軽量そうでしたので、そちらを使って実装してみます。

ライブラリ GitHub Star GitHub Link npm UnpackdSize
easy-markdown-editor 1.8k https://github.com/Ionaru/easy-markdown-editor 495kB

(2022/12/18 調査時点)

環境

  • Node.js v16.18.1
  • Nuxt3 stable
  • EasyMDE 2.18.0

インストール

nuxtをセットアップして、easymdeをインストールすれば準備完了です。

cssの適用

EasyMDEのデザインを適用するためにnuxt.config.tsにcssを定義します。

EasyMDEを組み込む

EasyMDEですが、そのままSSRで動かすと以下のようなエラーとなってしまいました。内部でnavigatorが参照されているのですが、SSRではそんなプロパティはないよと怒られます。

そのため、上記例ではmountedフックの中で動的インポートを使ってEasyMDEをクライアントサイドで読み込ませるように対処しました。

EasyMDEでは、初期化時の引数でelementプロパティにDOM要素を渡す必要があるため、refでcontentAreaを設定しています。

適用すると以下のようなカッコイイエディタが表示されます。

参考リンク

 

コメント

タイトルとURLをコピーしました