Rendering Vue template to Javascript variable?

Question

I'm using the handy Bootbox.js to give me easy Bootstrap modal dialogs. The way it is used is something like this:

bootbox.dialog({message: "<div>HTML goes here</div>", onEscape: true, animate: false});

I.e., you instantiate the dialog passing HTML as the 'message' property. I want to use a Vue template for the HTML, but there's a little problem with this. With Vue, you mount the instance to a DOM element - but the DOM element doesn't exist until bootbox.dialog has been called. What I am doing at the moment is the following, which works but is kludgy:

bootbox.dialog({message: "Loading...", onEscape: true, animate: false});
vm.$mount('.bootbox-body');

That is, I'm instantiating the bootbox.dialog with some HTML which immediately gets replaced once the Vue instance is mounted. Ideally what I'd like to do is to render the Vue template to a Javascript string before calling bootbox.dialog, then I could pass the string as the message property. I don't see a way of doing this, though. I know I can use vm.$mount to mount the instance to an off-document element, but presumably I need to insert it into the DOM to be able to get at the HTML.

Of course, I may be looking at this the wrong way and there may be a much simpler solution which I haven't thought of, in which case I'd be keen to hear about it!

Roy J · Accepted Answer · 2017-06-23 20:09:02Z

3

As you note, you can render to an off-document div. You can also get the innerHTML of your Vue element (this.$el), so just call bootbox.dialog inside mounted().

new Vue({
  el: document.createElement('div'),
  template: '#foo',
  mounted() {
    // This is where you would call
    // bootbox.dialog({message: this.$el.innerHTML, onEscape: true, animate: false});
    console.log(this.$el.innerHTML);
  }
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>

<template id="foo">
<div>
  <div class="inverse">Hi there <button>foo</button></div>
</div>
</template>

answered Jun 23, 2017 at 20:09

Roy J

44k10 gold badges84 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Rendering Vue template to Javascript variable?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related