v-img produces node mismatch on nuxt

Versions and Environment

Vuetify: 1.2.3 Vue: 2.5.17 Browsers: Chrome 69 OS: Windows 10

Previously worked in:

Vuetify: Vue:

Steps to reproduce

Cannot reproduce using codepen. This requires nuxt SSR rendering.

Expected Behavior

v-img produces node mismatch.

mismatching childNodes vs. VNodes:
NodeList(2) [div.v-responsive__sizer, div.v-image__image.v-image__image–preload.v-image__image–cover]

(3) [VNode, VNode, VNode] 0: VNode {tag: “div”, data: {…}, children: undefined, text: undefined, elm: div.v-responsive__sizer, …} 1: VNode {tag: “vue-component-215-transition”, data: {…}, children: undefined, text: undefined, elm: div.v-image__image.v-image__image–preload.v-image__image–cover, …} 2: VNode {tag: “div”, data: {…}, children: undefined, text: undefined, elm: div.v-responsive__content, …}

Actual Behavior

From what I can see SSR produces two children.

<div class="v-responsive__sizer" style="padding-bottom: 66.65%;"></div>
<div class="v-image__image v-image__image--cover" style=""></div>

But on client we also have a third child <div class="v-responsive__content"></div>

Which causes the error.

Reproduction Link

---

Additional Comments:

[8bu]

Got the same problem, even with v-carousel-item. Sometimes they render <v-carousel-item :src="..."> to <div src="..."> but it’s gone when we try to refresh the page. Weird behavior

[Globerada]

Same here with v-img. As @dotneet suggested, with aspect-ratio=“1” is gone