SSR, Hydration node mismatch

[209]

  <div>
    <el-dropdown>
      <span>
        test
      </span>
      <template #dropdown>
        <div>
          <el-dropdown-menu>
            <el-dropdown-item>Action 1</el-dropdown-item>
            <el-dropdown-item>Action 2</el-dropdown-item>
            <el-dropdown-item>Action 3</el-dropdown-item>
            <el-dropdown-item disabled>Action 4</el-dropdown-item>
            <el-dropdown-item divided>Action 5</el-dropdown-item>
          </el-dropdown-menu>
        </div>
      </template>
    </el-dropdown>
  </div>

https://github.com/209/element-plus-nuxt-starter

[YunYouJun]

Nuxt3 is in beta, there are many bugs that have not yet been fixed, and the API is even subject to change, so we hope to wait for it to become more stable before continuing to adapt it.

More info see https://github.com/nuxt/framework/projects/2.

[209]

It's not a nuxt3 problem. I reproduced the bug with vite: https://github.com/209/vite-ssr-elements-ui

<template>
  <el-dropdown>
    <span>test</span>
    <template #dropdown>
      <div>
        <el-dropdown-menu>
          <el-dropdown-item>Action 1</el-dropdown-item>
          <el-dropdown-item>Action 2</el-dropdown-item>
        </el-dropdown-menu>
      </div>
    </template>
  </el-dropdown>
</template>
<script>
import { ElDropdown, ElDropdownMenu, ElDropdownItem } from 'element-plus';
export default {
  components: {
    ElDropdown, ElDropdownMenu, ElDropdownItem
  }
};
</script>

[YunYouJun]

Try element-plus/lib.

[209]

I tried. No progress: warning appears

[YunYouJun]

Yeah, I can reproduce it. Maybe it's related to vue ssr, I haven't found a solution for it yet.

• https://stackoverflow.com/questions/64697418/vue-js-3-ssr-missing-template-or-render-function-during-client-hydration
• https://ssr.vuejs.org/guide/hydration.html

[209]

Sorry, i forgot to add this link: https://github.com/vuejs/vue-next/issues/3989 Maybe it's vue3 problem.

[xiaoxian521]

This is a problem with vue ssr, let's wait for the fix