[Vuejs]-How to mix Vue components with HTML outside the template

by

0👍

Option 1:

First create a vue container on a basic template. This template will then load a component which gets your data from the sever and displays it, so:

// This is your main vue instance container
<div id="#my-custom-app">
  <dynamic-html v-if="myHtmlFromServer" template="myHtmlFromServer"></dynamic-html>
</div>

Within this main component, you need to hook up created event and populate myHtmlFromServer with your HTML content from the editor.

import DynamicHtml from './myComponents/DynamicHtml'
new Vue({
  el: '#my-custom-app',
  data () {
    return {
      myHtmlFromServer: ''
    }
  },
  components: {
    DynamicHtml
  }
  created () {
    // this.myHtmlFromServer = this.getDataFromServer()
  }
})

The <dynamic-html> component, would have props: ['template'] and on the created event would assign this.$options.template = this.template.

This option will set the HTML template of that component and allow Vue to render it as normal (meaning you can then do {{someVal}} in your CKEditor.

Option 2:

Another option is if you’re using a server side language like PHP, then you could just put that html on the page i.e echo $myHtmlContent and as long as that content contains <div id="#my-custom-app"> you Vue instance will mount. PHP will add the HTML to the page before the JS processes the page so it’ll just work.

Leave a comment