1

I am using NuxtJS with Vuetify and I have the following (shortened) component

<template>
  <v-card nuxt :to="`/article/${id}`">
    <v-card-actions>
      <v-btn active-class="no-active" text nuxt :to="`/newspaper/${newspaper.latName}`">
        <v-icon>mdi-text-box</v-icon>
        {{ newspaper.araName }}
      </v-btn>
      <v-btn text class="mr-2">
        <v-icon>mdi-clock-outline</v-icon>
        {{ since }}
      </v-btn>
    </v-card-actions>
  </v-card>
</template>

This gives me the following warning in the browser console:

[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, or missing. Bailing hydration and performing full client-side render.

but the page still works and navigation still works too. If I replace one of the nuxt link with a function triggering a router push the warning goes away.

Why does this happen?

EDIT: This is how I use this component

<template>
  <span>
    <ArticleCard
      v-for="(article, i) in articles"
      :key="i"
      v-bind="article"
    ></ArticleCard>
  </span>
</template>
Hamza Mogni
  • 672
  • 1
  • 7
  • 21
  • What do you have in the DOM? Can you double-check the HTML generated by all of this? – kissu Aug 31 '21 at 15:26
  • nesting links is invalid hence the error, using nuxt links, :to etc it will essentially render ... your see this from the dom in devtools – Lawrence Cherone Aug 31 '21 at 15:31
  • So in order to implement it I would be forced to do it the router push way right? – Hamza Mogni Aug 31 '21 at 15:32
  • @LawrenceCherone I've tried to have 2 `nuxt-link`nested and it did not produced any error so far. Looks wrong but no DOM warning, this is maybe not consistent or only triggered on a larger scope. Using the HTML validator of W3c may help diagnose this one I guess. @hamza the solution here, is to either change your HTML structure to have something valid or hack the thing with a `router.push` yeah (not the best way to deal with it IMO). – kissu Aug 31 '21 at 15:40
  • 1
    Yeah, just double-checked on W3C and it's indeed forbidden as expected. Nuxt might recover by itself on some situations I guess. – kissu Aug 31 '21 at 15:42
  • so it needs to be hacked... Thank you all for all of your help! – Hamza Mogni Aug 31 '21 at 15:54
  • IMO, you can avoid hacking it and make it clean but you choose how to handle it at the end. – kissu Aug 31 '21 at 15:56

1 Answers1

1

You do have 2 things here:

  • DOM hydration issue, here is a related question with all the available details. Feel free to read it and come back to me after if it is really not working. But mainly, inspect the DOM with your devtools and try to see what is generated/hydrated.
  • you're probably not using the :to prop properly here. Here is the Vuetify documentation which is basically saying that you can check Vue router's :to prop. This one is to be used like :to="'home'" or :to="{ name: 'name' }". I'm not sure of the content of buttonLink but be sure that this is following the required object/string.
kissu
  • 40,416
  • 14
  • 65
  • 133
  • Thank you. Yes I have already followed debugging steps in the mentioned SO question, it didn't solve my issue, I couldn't find any markup problems. Then I started a process of locating what exactly triggers the warning, and I found out that if i remove one of the ```:to``` the warning disappears. The way I am using the :to tags is like this ```:to="/desired/path"```. I will try to use the notation mentioned in the docs and see if it will solve the issue – Hamza Mogni Aug 31 '21 at 14:34
  • So I have now changed them to ```:to="{path: `/article/${id}`}"``` but it didn't solve the problem – Hamza Mogni Aug 31 '21 at 14:37
  • As for the DOM hydration issue, you'll need to provide us more info. Do you have something inside of your `v-btn`? A lot of use-cases are given in the link above. I tried to nest a `nuxt-link` inside of another one, it's doing okay. But it may depend of the structure around it I guess @HamzaMogni – kissu Aug 31 '21 at 15:19
  • sorry that was a typo in my comment, this is how im using it ```:to="`/article/{$id}`"``` – Hamza Mogni Aug 31 '21 at 15:24
  • as for what I have inside the v-btn, I have just edited my question to include it – Hamza Mogni Aug 31 '21 at 15:26