Vueコンポーネントを含むHTMLの文字列用のNuxtレンダリング関数

Nuxtのためにこれを解決しようとしています

WIPのコードサンドボックスが機能しない： https://codesandbox.io/s/zw26v3940m

OK、つまり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>が含まれており、その上にいくつかの小道具があります（image propは、簡潔にするために省略したJSONオブジェクトです）。グローバルに登録されています。

私たちが書いた<wp-content>というコンポーネントがあり、Vueではうまく機能しますが、Nuxtでは機能しません。 2つのレンダリング関数に注意してください。1つはVue用で、もう1つは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 } })
    } 
}

したがって、最後のレンダリング関数は、実際にVue this.htmlのコンポーネントをレンダリングせず、HTMLとしてページに配置するだけですが、Nuxtで機能します。

では、Nuxtでこれを行うにはどうすればよいですか？サーバーからHTMLの文字列を取得してページに表示し、登録済みのVueコンポーネントを適切な本格的なVueコンポーネントに変換します。基本的に小さな「VueifyThis（html）」ファクトリー。

vue.jsdomrendernuxt.js

2019/05/06Drew Baker

コードサンドボックスに変更を加えました。今は動作しているようです https://codesandbox.io/s/q9wl8ry6q9

機能しなかった変更点：

vueの現在のバージョンでは、テンプレートは単一のルート要素のみを持つことができます
v-bindは変数のみを受け入れますが、文字列を渡します。

2019/05/15AXE