Liek2Saev
Liek2Saev
PostsComments
NNuxt
Created by Liek2Saev on 5/28/2025 in #❓・help
How to avoid hydration missmatch when using a dynamic template?
Hello, I'm working on a project where we fetch page data from a CMS as html. It can contain vue components such as a Tooltips. It basically works after turning on runtimeCompiler in nuxt.config but I get a lot of hydration mismatches from it. Does anyone have any tips on how to fix this? This is the component code: 
import { h } from 'vue';
import Tooltip from '~/components/OTooltip.vue';

export default {
  props: {
    content: {
      type: String,
      required: true,
    },
  },
  setup(props) {
    const renderContent = {
      components: {
        Tooltip,
      },
      template: `<div class="article__body">${props.content}</div>`,
    };
    return () => {
      return h(renderContent);
    };
  },
};
</script>
import { h } from 'vue';
import Tooltip from '~/components/OTooltip.vue';

export default {
  props: {
    content: {
      type: String,
      required: true,
    },
  },
  setup(props) {
    const renderContent = {
      components: {
        Tooltip,
      },
      template: `<div class="article__body">${props.content}</div>`,
    };
    return () => {
      return h(renderContent);
    };
  },
};
</script>
6 replies