Nuxt render function for a string of HTML that contains Vue components

Solution 1:

This was what worked and was the cleanest, thanks to Jonas Galvez from the Nuxt team via oTechie.

export default {
  props: {
    html: {
      type: String,
      default: ""
    }
  },
  render(h) {
    return h({
      template: `<div>${this.html}</div>`
    });
  }
};

Then in your nuxt.config.js file:

    build: {
        extend(config, ctx) {
            // Include the compiler version of Vue so that <component-name> works
            config.resolve.alias["vue$"] = "vue/dist/vue.esm.js"
        }
    }

Solution 2:

And if you use the v-html directive to render the html?

like:

<div v-html="html"></div>

I think it will do the job.

Solution 3:

Here's a solution on codesandbox: https://codesandbox.io/s/wpcontent-j43sp

The main point is to wrap the dynamic component in a <div> (so an HTML tag) in the dynamicComponent() template, as it can only have one root element, and as it comes from Wordpress the source string itself can have any number of top level elements.

And the WpContent component had to be imported.