Encountering an issue in Nuxt.js that states:
[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
found in
---> <Anonymous>
<RenderPost> at components/RenderPost.vue
<Pages/post/Id.vue> at pages/post/_id.vue
<Nuxt>
<Layouts/default.vue> at layouts/default.vue
<Root>
The code structure was based on examples from: and the RenderPost.vue component looks similar to this:
<template>
<client-only>
<component :is="dynamicComponent" />
</client-only>
</template>
<script>
export default {
methods:
{
linkedView()
{
return `<a href="#" @click.prevent="runSomething">Click me</a>`;
},
},
computed :
{
dynamicComponent() {
return {
data() { return { foo : null }},
template : `<div>${this.linkedView()}<br>{{ foo }}</div>`,
methods :
{
runSomething()
{
this.foo = 'ran something!'
}
}
}
}
}
}
</script>
The <client-only> block was added to address issues related to server-side rendering and client-side rendering mismatch. Removing it leads to another error message stating:
[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.