Vue Runtime Compiler, for arbitary Markdown

I don't know how to emit only client-side bundle, that is ssr-only, but the simple answer is

// vue.config.js

module.exports = {
  runtimeCompiler: true
}

Or,

// webpack.config.js or nuxt.config.js

      config.resolve.alias.vue = 'vue/dist/vue.common'

v-runtime-template seems unmaintained. Luckily, according to StackOverflow, it is as simple as

<template>
  <component :is="dynamicComponent" />
</template>

<script>
export default {
  prop: {
    template: {
      type: String,
      required: true,
      default: ''
    }
  },
  computed: {
    dynamicComponent: function() {
      return {
        template: `<div>${this.template}</div>`,
        methods: {
          someAction() {
            console.log("Action!");
          }
        }
      }
    }
  }
}
</script>

I extended it a bit, and make it available for markdown as well as PrismJS. (In TypeScript / class component style.)

<template lang="pug">
.content
  component(:is="dynamicComponent")
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'nuxt-property-decorator'
import Prism from 'prismjs'
import 'prismjs/themes/prism.css'
import MakeHtml from '@/assets/make-html'

@Component
export default class Markdown extends Vue {
  @Prop({ required: true, default: '' }) content!: string
  @Prop({ default: () => ({}) }) ctx!: Record<string, any>

  makeHtml = new MakeHtml()

  dynamicComponent = Vue.extend({
    computed: {
      ctx: () => this.ctx
    },
    mounted() {
      Prism.highlightAllUnder(this.$el)
    },
    template: this.makeHtml.getHTML(this.content)
  })
}
</script>

And, nuxt.config.js

    extend(config) {
      config.resolve.alias.vue = 'vue/dist/vue.common'

      config.module.rules.push({
        test: /content\/.+\.md$/,
        use: {
          loader: 'raw-loader',
          options: {
            esModule: false
          }
        }
      })
    }

I don't know how to emit only client-side bundle, that is ssr-only

Actually, I lied. I do know a framework that can ssr-only.

https://content.nuxtjs.org/

Comments

[Leny Diallo]

Thank you !!!

prop: { // props :)
    template: {
      type: String,
      required: true,
      default: ''
    }
  })