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 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 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:tired_face: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
npm i vue3-runtime-template. There are 4 other projects in the npm registry using vue3-runtime-template.GitHub
feat(nuxt): support vue runtime compiler by huang-julien Β· Pull Req...
π Linked issue
resolve nuxt/nuxt#13843
β Type of change
π Documentation (updates to the documentation or readme)
π Bug fix (a non-breaking change that fixes an issue)
π Enhancement (improving ...
GitHub
Issues Β· vuejs/core
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web. - Issues Β· vuejs/core
0 Replies