Vue.js 包含 Vue 组件的 HTML 字符串的 Nuxt 渲染函数

I'm trying to solve this for Nuxt

Codesandbox of a WIP not working: 100

好的，我把WordPress作为CMS，它输出一堆HTML.HTML的一个示例如下所示:

'<h2>A heading tag</h2>
<site-banner image="{}" id="123">Slot text here</site-banner>
<p>some text</p>'

请注意，它包含一个Vue组件<site-banner>，上面有一些props (imageprops 是一个JSON对象，为了简洁起见我省略了).该组件已在全球注册.

我有一个我们编写的组件，名为<wp-content>，它在Vue中非常有效，但在Nuxt中不起作用.请注意这两个渲染函数，一个用于Vue，另一个用于Nuxt(显然这是为了示例，我不会同时使用这两个).

export default {
    props: {
        html: {
            type: String,
            default: ""
        }
    },
    render(h, context) {
        // Worked great in Vue
        return h({ template: this.html })
    }      
    render(createElement, context) {
        // Kind of works in Nuxt, but doesn't render Vue components at all
        return createElement("div", { domProps: { innerHTML: this.html } })
    } 
}

因此，最后一个呈现函数在Nuxt中工作，除了它实际上不会在this.html中呈现Vue组件，它只是将它们作为HTML放在页面上.

那么在Nuxt中我该怎么做呢？我想从服务器获取一个HTML字符串，并将其呈现在页面上，然后将任何已注册的Vue组件转换为适当的完整Vue组件.基本上是一个小小的"VueifyThis(html)"工厂.