Solve the problem of el-menu incompatible SSR in vue3 project

Solve el-menu incompatible SSR error

First it will report an error:Hydration completed but contains mismatches, and issue aboutHydrationWarning!

Here is how I solved it step by step:

1. At the beginning, I really didn’t know how to solve it. There was no result in searching for error messages online. I only knew that it was el-menu incompatible ssr

2. Then enter the el-plus official website and finally found the clue:

Menu Menu

A menu that provides navigation functions for the website.

In the SSR scenario, you need to wrap the components in<client-only></client-only>Among them (such as: Nuxt) and SSG (: VitePress).

3. So I just addedclient-onlyTag, vue3 cannot recognize the tag, and it is discovered that this is based onNuxtFramework tags

4. How to use the Vue3 projectclient-onlyWoolen cloth? Baidu discovered such a plug-in latervue-client-only

Here is its npm link: /package/vue-client-only

5. So I immediately used it, but it was reported an error again... Then I went to the github official website of this plug-in: /egoist/vue-client-only and found that this was a project 4 years ago, so this must be based on vue2 incompatible with vue3! !

6. Then just when I didn’t know what to do, I clicked on this projectIssues, I found that someone had asked a question

Is there a need to update component for usage with Vue 3? #122

The following answer finally saved me!

I created a small package for those who want to use the client-only component with Vue 3 outside a Nuxt project.
Check it here /duannx/vue-client-only

7. Enter the Vue3-encapsulatedvue-client-only ：/duannx/vue-client-only

Then follow the usage tutorial to resolve the error! ! ! !

npm install --save @duannx/vue-client-only

import ClientOnly from '@duannx/vue-client-only'
&lt;client-only&gt;
    &lt;el-menu
        :default-active="activeIndex"
        mode="horizontal"
        @select="handleSelect"
    &gt;
        &lt;el-menu-item index="orders"&gt;{{ t('') }}&lt;/el-menu-item&gt;
        &lt;el-menu-item index="records"&gt;{{ t('') }}&lt;/el-menu-item&gt;


        &lt;el-sub-menu index="language"&gt;
            &lt;template #title&gt;{{ t('') }}&lt;/template&gt;
            &lt;el-menu-item index="zh"&gt;Simplified Chinese&lt;/el-menu-item&gt;
            &lt;el-menu-item index="en"&gt;English&lt;/el-menu-item&gt;
        &lt;/el-sub-menu&gt;


        &lt;el-menu-item index="logout" v-if="userStatus"&gt;
            {{ t("") }}
        &lt;/el-menu-item&gt;


        &lt;el-menu-item index="login" v-if="!userStatus"&gt;
            {{ t("") }}/{{ t("") }}
        &lt;/el-menu-item&gt;

    &lt;/el-menu&gt;
&lt;/client-only&gt;

The above is the detailed content of solving the el-menu problem in the vue3 project. For more information about the el-menu incompatible SSR problem, please pay attention to my other related articles!