Load vue component into string to use with buefy confirm

Question

Is it possible to load a vue component into a string to be used with buefy confirm?

I've tried the following which is not working:

archiveChannelPrompt () {
  const archiveChannel = document.createElement('template');
  new Vue({
      i18n,
      router,
      render: (h) => h(OArchiveChannel, {
        props: {
          channel: this.channel,
        }
      }),
    }).$mount(archiveChannel);

  this.$buefy.dialog.confirm({
    title: 'Archive Channel',
    message: archiveChannel.outerHTML,
    confirmText: 'Archive',
    onConfirm: () => this.$buefy.toast.open('Archived!')
  });
}

The field message needs to receive a string. That string can contain html. So the problem it seems is I need to load the vue component into a string in javascript so I can pass it along to buefy.

I thought the innerHTML or outerHTML isn't working because the component is not rendered in the DOM, but when I mount the component into the DOM I still get nothing returned.

How can I get around this problem?

Does this answer your question? [How to use Buefy's Dialog component with user provided content and be safe in terms of XSS](https://stackoverflow.com/questions/66349657/how-to-use-buefys-dialog-component-with-user-provided-content-and-be-safe-in-te) — Lawrence Cherone, Jan 07 '22 at 11:33
No it didn't. While it's vaguely similar it's looking at a different purpose and the answer is tailored to that purpose - protecting against XSS. To quote the OP on that question in a comment on the accepted answer: "Nevertheless, I'm sure (but indeed over complicated) that we could get the html string of a component. But maybe that should be in another stackoverflow question?" — joe92, Jan 07 '22 at 15:13

score 0 · Accepted Answer · answered Jan 07 '22 at 12:08

Figured it out. A little tweak was needed. Use $mount but don't specify an element to mount to, then within $el you can find the component that you have loaded with all the usual properties available such as innerHTML.

archiveChannelPrompt () {
  const archive = new Vue({
      i18n,
      router,
      render: (h) => h(OArchiveChannel, {
        props: {
          channel: this.channel,
        }
      }),
    }).$mount();

  this.$buefy.dialog.confirm({
    title: 'Archive Channel',
    message: archive.$el?.innerHTML,
    confirmText: 'Archive',
    onConfirm: () => this.$buefy.toast.open('Archived!')
  });
}

Load vue component into string to use with buefy confirm

1 Answers1