How to render HTML with custom components in VueJS 3 at runtime?

Question

I am currently attempting to render HTML at runtime using Vue3 (and no, v-html isn't sufficient for my needs because I have a custom component that needs to be rendered within the HTML). How do I go about doing this?

Answer 1

Turns out that what was preventing this from working for me was a circular import in my component, so I'll answer it on my own! In Vue3 it's much easier to render arbitrary HTML including components via a component. Here's a bit of stub code that shows an example of how to do this:

// IMPORTANT: you must import `compile` from this file! Standard Vue builds won't work
import { compile } from 'vue/dist/vue.esm-bundler.js'
// Include custom components that are embedded in your HTML here
import CustomComponent from './CustomComponent.vue'

export default {
  name: 'CustomContent',
  // The `content` prop should contain your HTML; you could alternately make it Markdown
  // or something and parse that in the `setup` method
  props: ['content'],
  components: {
    CustomComponent,
  },
  setup (props) {
    // Setup accepts a reactive `props` object and can return a render function, so this
    // functionally allows us to compile arbitrary HTML into Vue components
    return compile(props.content)
  },
}

That's it! The main caveats are all noted in the comments, and you can include as many custom components as you wish. Just watch out for circular imports in your custom components. ;-)

(Incidentally, you can work around a circular import by defining one of the components globally instead, which is how I ended up solving my actual issue.)