2

The solution for the Vue is VHTML. But if we try to use it in Nuxt, we'll get

client.js?1d97:57 [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 <Root>)

I tried below solution (suggested here)

build: {
 extend(config) {
  config.resolve.alias['vue'] = 'vue/dist/vue.common'
 }
}

but it has not solved the problem.

More outputs:

vue.common.dev.js?4650:6460 Mismatching childNodes vs. VNodes:  NodeList(2) [comment, comment] (117) [VNode, VNode, VNode, VNode, VNode, VNode, VNode, VNode, VNode, ....

[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.
kissu
  • 40,416
  • 14
  • 65
  • 133
Takeshi Tokugawa YD
  • 670
  • 5
  • 40
  • 124
  • 1
    Can you share your template code? – Nick Dawes Dec 21 '21 at 07:50
  • @NickDawes It's just `VHTML(:html="arbitraryHTML")`. My `arbitraryHTML` is being rendered wihtout errors when `div(v-html="arbitraryHTML")`. – Takeshi Tokugawa YD Dec 21 '21 at 09:56
  • You're using pug on top of that? – kissu Dec 21 '21 at 09:57
  • @kissu, Of course it is not the root element of the component but all other code works correctly so I suppose it does not matter. – Takeshi Tokugawa YD Dec 25 '21 at 04:56
  • It can actually matter depending on what you have in your template exactly. Btw, did my answer helped somehow? – kissu Dec 25 '21 at 06:51
  • @kissu, Although I thank you for your answer, afraid no yet. I `v-html` is no option because it irequires of adding of new wrapper while here we are talking about how to avoid this wrapper. `` breakes the SEO, so it is not the universal solution. – Takeshi Tokugawa YD Dec 27 '21 at 02:35
  • I can't see your template and I don't really understand why you could not use `v-html` here, what's the issue with it? Also, having a sanitizing wrapper is not a bad thing IMO, since it's related your app's security. But you do you at the end! – kissu Dec 27 '21 at 09:12
  • @kissu, I very thanks to Vue about it sanitizing my HTML by `v-html` and even want it. By why `div` or another element is requires for this? I was completely satistied and did not ask this question if `template(v-html)` worked but for some irrational reazon it does not works. – Takeshi Tokugawa YD Dec 27 '21 at 09:21

1 Answers1

0

Not sure about the first issue, we'll need to check your nuxt.config.js and package.json to fix this one or at least know how you've started your project.
The linked solution is from 2017, so probably not that relevant nowadays too.

Never heard of VHTML, I don't really see the point of it. It doesn't even sanitize the output and is an additional dependency to rely on. The benefits are not amazing neither, I would pass on this one.
I recommend the usage of the regular v-html and a sanitizer as shown in my answer.

Also, the rest of your issue with the DOM mismatch is the usual issue when you're working with SSR.
Here is my answer on how to solve this and also what is the cause.

TDLR: it's not a config issue but rather a template one.

kissu
  • 40,416
  • 14
  • 65
  • 133