Nuxt + Netlify-CMSでスニペットを埋め込む

スニペットを表示したい

本当にちょっとずつ、ブログをアップデートしていこうと思い、スニペットを表示できるようにしました。
みんな大好きなCodePanJSFiddleみたいなの埋め込めばいいじゃん!って感じではあるんですが、 今後の展望として、インタラクティブ感のあるメディアの展開をしてみたいと思っているので、記事の一番下でいいから、とりあえず、JavaScriptを埋め込めるように・・・。

スクショ

こんな感じでスニペット欄を作成します。
adminの設定ファイルは以下。 /static/admin/confing.yml

collections:
  /* 中略 */
  fields:
    - {label: "snipet", name: "snipet", widget: "string", require: false}

fieldsにsnipetの欄を追加。
pages/blog/_slag.vueから呼び出すときはこんな感じ

<template lang="pug">
  article.markdown-body
    .md(v-html="$md.render(body)")
    .snipet(v-if="snipet")
      component(:is="snipet")
</template>
<script>
import copySnipet from '~/components/snipets/copySnipet'
export default {
  layout: 'blog',
  async asyncData({ params }) {
    let post = await import('~/content/blog/posts/' + params.slug + '.json');
    return post;
  },
  components: {
    copySnipet
  }
}
</script>

これで、~/components/snipets/copySnipet.vueが呼び出せます!

copySnipet呼び出し成功!