ContentfulなどのCMSに記述したNuxt.jsのソースコードを描画する

v-runtime-templateのインストール

v-runtime-templateというモジュールをインストール。

npm install v-runtime-template

nuxt.config.js設定

nuxt.config.jsで完全ビルド設定。

modules: [
  // markdownitを有効化。
  '@nuxtjs/markdownit',
],
build: {
  extend(config) {
    // 完全ビルドエイリアス設定
    config.resolve.alias["vue"] = "vue/dist/vue.common"
  }
},

※完全ビルド・ランタイム限定ビルドについてはこちら

要はテンプレート文字列をそのまま出力するのではなく、ちゃんとコンパイルするよということです。デフォルトではランタイム限定ビルドとなっています。

ランタイム限定ビルドは完全ビルドに比べおよそ 30% 軽量なため、
利用できるときにはこれを利用したほうが良いでしょう。

とあるため、完全ビルドを使用する際は注意が必要です。

vueファイル内での使用

vueファイル内でv-runtime-templateをインポート。
読み込んだv-runtime-templateコンポーネントのtemplateプロパティに内容を渡して描画。

<template>
<!-- v-runtime-templateでテンプレート文字列を描画 -->
<VRuntimeTemplate :template="template" />
</template>

<script>
import VRuntimeTemplate from "v-runtime-template";

export default {
  data() {
    return { template: "" }
  },

  components: {
    VRuntimeTemplate,
  },

  created() {
    // v-runtime-templateで描画するにはルートタグが必要なため、今回の場合は<article>で囲んでいる
    this.template = "<article>" + 【描画したい内容】 + "</article>";
  },
}
</script>

これによってContentfulのテキスト内に、下記のようにnuxtの<template>内で記述するのと同じ使用感で記述することができます。

【描画したい内容】

<TestComponent :testParam="testParam"/>
<p>これはテストだよー{{ testData }}</p>

もちろんContentful以外のCMSの場合や、その他nuxtの<template>内の記述を文字列から描画したい場合もOKです。