Why does nuxt complain about the form tag?

Question

Vue.js

I get an 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.

At random, I came to the conclusion that the error crashes when the tag is inserted

<div class="dummy" :class="{visible: customServiceDummy}" @click="hideDummy">
            <div class="dummy-content" @click="closeCustomImagesList">
                <div @click="hideDummy" class="dummy-close-icon icon-close"></div>

                    <form class="custom-service-form" @submit.prevent="saveCustomService">
                    <!--Разметка внутри form-->
            </div>
</div>

If you remove the form tag from the code above, but leave everything inside, then there is no error. What can be wrong?

Answer 1

Most likely he swears on separate elements in the form. Try to find which elements it swears at (using the exclusion method) and wrap them in a tag . In my case, it was the @nuxtjs/vuetify plugin, the components of which I used inside the form, and for this plugin I also had to add the option to disable ssr during initialization.
<client-only></client-only>