2022.12.28この記事は約2分で読めます。最近は個人的にnuxt3をよく触っています。練習としてちょっとしたアプリを作っているのですが、何らかの文書をマークダウンで扱えると文書構造を表現できて便利です。そこで、今回はnuxt3でマークダウンエディタを扱ってみます。Editorというライブラリがシンプルで軽量そうでしたので、そちらを使って実装してみます。2.18.0インストールnuxtをセットアップして、easymdeをインストールすれば準備完了です。easymdecssの適用EasyMDEのデザインを適用するためにnuxt.config.tsにcssを定義します。placeholder="markdown形式で説明を記述できます。mde.value();}});});</script><template><div><textarearef="contentArea"v-model="content"rows="5"placeholder="markdown形式で説明を記述できます。"maxlength="300"/></div></template>EasyMDEですが、そのままSSRで動かすと以下のようなエラーとなってしまいました。内部でnavigatorが参照されているのですが、SSRではそんなプロパティはないよと怒られます。definedそのため、上記例ではmountedフックの中で動的インポートを使ってEasyMDEをクライアントサイドで読み込ませるように対処しました。EasyMDEでは、初期化時の引数でelementプロパティにDOM要素を渡す必要があるため、refでcontentAreaを設定しています。適用すると以下のようなカッコイイエディタが表示されます。コピーbyebyehaikikyouをフォローするbyebyehaikikyouデバッグライフ関連記事NuxtJSNuxt3をさわってみるNuxt3はbeta版になっている、Nuxt3の雰囲気をつかむためインストールから起動するところまでやってみる。インストールnuxiという新しいCLIを使う。nuxiについて、プロジェクトのトップでinfoコマンドを実行してみる。provideしたコンポーネントでinjectvee-validateを見ていて、なるほどこれは参考になると思ったのでメモ。provide/injectについて、provideで提供したオブジェクトは子ノードでinjectすることで子ノード内に依存関係を持ち込むことができる。webglを簡単に組み込みできるnpmモジュールを書いてみました。unityのwebglビルドを配置してコンポーネントを指定するだけです。windowのリサイズに合わせてcanvasタグのサイズも変わるようにしていま...NuxtJSNuxt3でprimevueを使う先月2022/11にNuxt3のstable版がリリースがされ、いよいよNuxt3を積極的に使っていける状況となりました🎉今回はvue3にも対応しているprimevueというフレームワークを使ってデザインをしてみます。primevueですが...NuxtJSnuxt3のserver/apiで認証済みか否かをチェックするはじめに前回Nuxt3の@sidebase/nuxt-authで認証処理を作成しました。今回はserver/apiやmiddlewareで認証済みかチェックする処理を作ります。パターン以下3つのパターンで書いてみます。server/apiで...NuxtJSNuxt3でcodemirrorに絵文字ピッカーを追加する前回は以下の記事でNuxt3にマークダウンエディタのeasymdeを導入してみました。マークダウンで文字入力できるようになったら絵文字も入力したくなります。今回はマークダウンエディタに絵文字ピッカーを組み込んでみます。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。名前:moritetuITエンジニア地方でITエンジニアをしています。Webやスマフォアプリ、Hadoopなどのビッグデータに関するシステムに関わり、現在は企画開発の業務をしています。(必須)サイトタイトルとURLをコピーしました。