Vue Universal Runtime Compile

cms.vue

<template>
  <div>
    <component :is="CMSComponent" :x="x" />
    <button @click="x++">
      Click on me
    </button>
  </div>
</template>

<script>
import compile from '~/compile'

export default {
  fetch () {
    this.cmsContent = `
      <div :class="['test']">
        Clicked: {{ x }} times
      </div>
    `
  },
  data () {
    return {
      x: 0,
      cmsContent: 'loading...'
    }
  },
  computed: {
    CMSComponent () {
      return compile(this.cmsContent, { props: ['x'] })
    }
  }
}
</script>

compile.js

let _compile
const _cache = {}

if (process.client) {
  _compile = (template) => {
    const Vue = require('vue/dist/vue.common')
    return Vue.compile(template).render
  }
} else {
  _compile = (template) => {
    const compiler = require('vue-template-compiler')
    return compiler.ssrCompileToFunctions(template).render
  }
}

export default function compile (template, additional) {
  const render = _cache[template] = _cache[template] || _compile(template)
  return { ...additional, render }
}

simple.vue

<template>
  <div>
    <CustomComponent foo="bar" />
  </div>
</template>

<script>
import compile from '~/compile'

const CustomComponent = compile('<span>{{ foo }}</span>', { props: ['foo'] })

export default {
  components: {
    CustomComponent
  }
}
</script>