Nuxt•16mo ago

vue3-runtime-template SSR

I'm using Storyblok as a CMS on a Nuxt 3 site.

We have just upgraded from Nuxt 2 where we used vue-runtime-template to dynamically compile the rich text field HTML which includes Vue components by setting Nuxt to use the runtime compiler in the

build

build

key in the Nuxt config.

On Nuxt 3, we set vue.runtimeCompiler to true in the config, and use vue3-runtime-template but this only tells Nuxt to use the runtime compiler on the client, not the server. The content is only rendered on the client, which defeats the object of using Nuxt in the first place, which is to get SSR.

This is blowing up the Storyblok editor when I change rich text fields because the VDom does not mach the real DOM and Vue can't cope in production, giving a

cannot read property insertBefore of null

cannot read property insertBefore of null

error.

How do I get the vue3-riuntime-template to render on the server?

Related reading:

Runtime template package: https://www.npmjs.com/package/vue3-runtime-template
PR where runtime compiler option was originally added to Nuxt (in experimental): https://github.com/nuxt/framework/pull/4762
Storyblok rendering rich text in Nuxt docs: https://www.storyblok.com/faq/how-to-render-richtext-nuxt
Vue cannot read property insertBefore of null bug thread https://github.com/vuejs/core/issues/5657😫

npm

vue3-runtime-template

Create Vue 3 components by compiling templates on the fly. Latest version: 1.0.2, last published: 3 years ago. Start using vue3-runtime-template in your project by running