User editable Vue template

Question

In my app, I have a template for things like Invoice, Email etc. I'd like the user to be able to edit these templates by dragging and dropping elements. I'm currently using vue-loader along with webpack to pre-compile my vue files into pure JS.

Is it possible to load a vue template from the database on the fly? I've seen this post but this isn't using vue-loader so I'm not sure how to override the template on my component via the code. Something like:

created: function () {
  this.$template = '<html><p>Loaded from the DB!</p></html>'
}

would be useful. Is this possible?

Edit: I've tried the following but I get an error Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.:

created: function () {
  document.body.innerHTML = '<html><p>I AM FROM THE DB {{total}}</p></html>'
}

If you are using the single file components (.vue) files - which you probably do, then I'm afraid this is not possible.The better way is building API.Vue, on client side, doesn't provide any module for communication with DB directly, also runtime build doesn't allow you to use template property into the vue instance directly. — Belmin Bedak
@BelminBedak Damn but thanks for the resonse. I've just read about async components (vuejs.org/v2/guide/components.html#Async-Components). Do you think they could be leveraged (I'm still reading)? It looks like I can declare the component then resolve it when I've loaded from the DB ... — webnoob
Let's first make clear what DB you are using ? Is it Mongo, Firebase or something else ? — Belmin Bedak
I'm actually using pouchDB / couchDB so a locally hosted noSQL db that sync's up to a server version. — webnoob
I wanna do something similar. Let's hope we will find solution. I was thinking of creating base component with variable indicating the state - in the toolbar, in the editor and live so every component will have it's own view when in the toolbar or in the editor. The user will just drag'n'drop & configure them and thus designing e.g. the invoice. — Nikola

Bert Bert · Accepted Answer · 2017-03-07T20:28:26

This would need to be modified to pass in the templates from your database, but this works in a very simple single file component. Obviously you will want to customize, but this demonstrates the concept.

Dynamic.vue

<script>
    export default {
        props:["template"],
        data(){
            return {
                message:"hello"
            }
        },
        created(){
            this.$options.template = this.template
        }
    }
</script>

App.vue

<template>
  <div>
      <dynamic 
        v-for="template, index of templates" 
        :template="template" :key="index">   
    </dynamic>
  </div>
</template>

<script>
  import Vue from "vue"
  import Dynamic from "./Dynamic.vue"

  export default {
    name: 'app',
    data () {
      return {
        templates: [
          "<h1>{{message}}</h1>",
          "<h4>{{message}}</h4>"
        ]
      }
    },
    components:{
      Dynamic
    }
  }
</script>

main.js

import Vue from 'vue'
import App from './App.vue'

new Vue({
  el: '#app',
  render: h => h(App)
})

User editable Vue template

1 Answers