mjml-in-browser.vue

mjml-in-browser.vuemjml-in-browser.vue

<template>
  <div>
    <div
      ref="raw"
      v-show="false"
    >
      <mjml>
        <mj-body>
          <mj-text
            padding="0 0 16px"
            color="#231f20"
            font-size="18px"
            line-height="18px">
            {{ $t('TITLE') }}
          </mj-text>
        </mj-body>
        <mjml />
      </mjml>
    </div>

    <iframe
      id="content"
      :srcdoc="compiled"
    />
  </div>
</template>

<script>
import mjml2html from 'mjml4-in-browser'

// Suppress unregistered elements warn
import Vue from 'vue'
Vue.config.ignoredElements = [/^mj/]

export default {
  name: 'mjml-renderer',
  data () {
    return {
      compiled: ''
    }
  },
  mounted () {
    this.compiled = mjml2html(this.$refs.raw.innerHTML).html
  },
}

</script>

<i18n>
{
  "en": {
    "TITLE": "Some content"
  }
}
</i18n>