[Vue][SSR] Suppress hydration mismatch warning

To suppress the hydration mismatch warning in Vue SSR, you can try the following approaches:

1. Manually Remove DOM Content:
   Before hydration, manually remove the DOM content of the element where Vue will be mounted.

   const rootId = 'app'
   const root = document.getElementById(vueRootId)
   root.innerHTML = ''
   // Your hydration code
   // ...
   

   See Remove all child elements of a DOM node in JavaScript for alternative ways to remove the childs of a DOM element.

2. Set the Warning Option to False:
   You can disable the warning message by setting the warning option to false in the Vue component or globally in the Vue.config object.

<template>
  <div>
    <p v-warning="false">This will not generate a warning</p>
  </div>
</template>

Vue.config.warning = false

3. Set the Environment Variable:
   You can also suppress the warning by setting the environment variable VUE_WARNING_DISABLE to true.

export VUE_WARNING_DISABLE = true

4. Use a Client-Only Component:
   Create a <ClientOnly> component that conditionally renders its content only on the client side, preventing the warning from occurring.

import { ref, onMounted, defineComponent } from 'vue'

const ClientOnly = defineComponent({
  setup(_, { slots }) {
    const show = ref(false)
    onMounted(() => {
      show.value = true
    })
    return () => (show.value && slots.default ? slots.default() : null)
  }
})

export {
  ClientOnly,
}

5. Use a Plugin:
   Install the vue-cli-plugin-suppress-warnings plugin to suppress the warning globally in your Vue project.

The specific approach that works best for you will depend on the context and requirements of your application.