問い合わせやコメントも急増したので、FAQを用意したほうがいいなと...Nuxt.jsのページのうち、FAQのような静的なページだけ、Markdownで作成できないかを調査したときの備忘録。typescript(3.6.2)ちょっと長めですが...Markdownだけのシンプルな方法とMarkdown内でVueコンポーネントを使う凝った方法の2パターンをまとめています。これを使うと一部のページをマークダウンで書けるので、FAQとか以外にブログとか記事とかも簡単にmarkdownで書けるようになるかもと。長めですが、見出しとソースコードを見てくとだいたい分かるかも。2.凝った方法ツイートを埋め込めるよう、Markdownファイルの中でvue-tweet-embedを利用しています。Markdownだけのシンプルな方法シンプルな方法はこんな感じMarkdownファイルを読み込んで、markedでHTML化して、v-htmlでHTMLを挿入Nuxt.jsでは、Markdownファイル(.md)のようなファイルをそのまま取り込む方法が無いので、Webpackプラグインのraw-loaderを使います。highlightjsnuxt.config.jsの設定.mdを読み込む際に、raw-loaderを使うように設定。requireで.mdファイルを読み込む。}}</script>そのままだといい感じの見た目にならないので、class="marked"のようにしておいて、markdown用のCSSを設定していけばOK。どんなCSSがいいかは、前の記事を参照ください。"~/assets/faq.md"とするとVSCode上でエラーがきませんでした。require("~/assets/faq.md");としてます。それによりモジュールとして読み込まれてしまうため、mdText.defaultでテキストを取得しています。CSSを使う場合、data-v-*属性が付与されますが、v-htmlでHTMLを挿入しているため、その属性がついていません。CSSが効かないため、markdown用のCSSを利用する際はグローバルで設定する必要があります。}"></Tweet>こんな感じに...ツイッターで、Vueのv-htmlのテキストにコンポーネントをいれることってできないかなぁ?markdownのなかにコンポーネント書けると色々便利そう。́ω`)v-htmlだとvueの解釈は出来ないので、独自のdirective定義してvueをコンパイルできるようにしたことはありますvueのtemplateオプションはHTML文字列を渡してvueのcomponentとしてcompileします。゚д゚)!大まかな流れカスタムディレクティブを用意カスタムディレクティブ内でコンポーネントを作成し、コンポーネントのtemplateにmarked()のHTMLを渡して、Vueのコンパイル(=$mounte()の呼び出し)Vueのコンパイルした結果からHTML要素を取得($el)して、カスタムディレクティブを設定したHTML要素の子に挿入(el.appendChild(instance.$el))長いし、複雑....vueはこんな感じ.vue自体はほぼ同じ。v-htmlがカスタムディレクティブのv-mdに変わってるだけ。vue-tweet-embedカスタムディレクティブ内で動的コンパイルカスタムディレクティブの用意していく。コンポーネントを作成。コンパイラ」を選択できるので、nuxt.config.tsの設定を変更していく。公式ドキュメントの「さまざまなビルドについて」を見ると、vue/dist/vue.commonを使えば良さそう。buildに以下の3行を追加。Kotlin/Python/Swift/Unity/Java/Haskell/DDDhttps://t.co/X3UXpmkJvpCrieitは個人で開発中です。どんな軽い内容でも嬉しいです。