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

[AliAbuArab]

Version

3.4.9

Reproduction link

https://github.com/AliAbuArab/vue-router-test.git

Steps to reproduce

Hello.
We facing a problem with a vue router when it envloved with unencoded characters.
Please check our repository.
https://github.com/AliAbuArab/vue-router-test.git

The problem occures when reload/refresh the page.
If the route in english its okay and working fine.
But when it comes to hebrew this not working and gives us
The client-side rendered virtual DOM tree is not matching server-rendered content....

export default {
  locales: [
    { 
      code: 'he',
      iso: 'he'
    },
    { 
      code: 'en',
      iso: 'en'
    }
  ],
  defaultLocale: 'he',
  parsePages: false,
  strategy: 'prefix_except_default',
  pages: {
    'categories/index': {
      he: '/קטגוריות',
      en: '/categories',
    },
    'categories/_id': {
      he: '/קטגוריות/:id',
      en: '/categories/:id',
    },
    search: {
      he: '/חיפוש',
      en: '/search'
    },
    promotions: {
      he: '/מבצעים',
      en: '/promotions'
    }
  }
}

What is expected?

Page that rendered from the serve

What is actually happening?

Empty page

---

We using:
nuxtjs v^2.14.7.
nuxt-i18n v"^6.15.4
Mode: ssr

[posva]

You need to encode your routes: #3350. You should wait for Nuxt to support it too: nuxt/nuxt#8325