SSR mismatch using b-dropdown with slot

Hello,

When using b-dropdown with a custom slot, like this (straight from the doc) :

<b-dropdown variant="link" size="lg" no-caret>
	<template slot="button-content">
		Click Me !
	</template>
	<b-dropdown-item to="/whatever">
		Link 1
	</b-dropdown-item>
	<b-dropdown-item to="/nowhere">
		Link 2
	</b-dropdown-item>
</b-dropdown>

I get the following SSR error :

[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.

Environment:

• macOS 10.13
• nuxt 2.3.4
• bootstrap-vue 2.0.0-rc.11

Is there a workaround ? Thanks ! 😃

[tmorehouse]

@jschoedt

There are issues with your markup.

You are telling list-group-item to render as a <button> element (via the button prop), and then placing a dropdown inside of that <button> (which the dropdown includes a <button>, as well as other content not allowed inside of that list group button <button>). So it is creating invalid HTML markup (you can’t have a <button> inside of another <button>), which the browser is “fixing” when it tries to hydrate. SRR blindly renders the invalid markup, but the browser when it sees that markup is removing things that aren’t allowed in the button (or placing bits outside of the button).

Use markup similar to below to get valid HTML markup:

<template>
  <b-list-group >
    <b-list-group-item class="p-0">
      <b-dropdown variant="link" no-caret text="DDown" class="w-100" toggle-class="text-left">
        <b-dropdown-item-button >
          Edit
        </b-dropdown-item-button>
      </b-dropdown>
    </b-list-group-item>
  </b-list-group>
</template>

[jschoedt]

You are right. Thanks for pointing that out. Removing the button attribute fixed it.