Accented (French or non-ASCII) characters in custom paths return Not Found (404)

[kngai]

Version

nuxt-i18n: 6.16.0
nuxt: 2.14.6

Nuxt configuration

mode:

• [] universal
• spa

Nuxt-i18n configuration

i18n: {
  strategy: 'prefix',
  defaultLocale: 'en',
  locales: [
    'fr',
    'en'
  ]
}

Reproduction Link

I've created a very simple NuxtJS app here that reproduces the issue: https://github.com/kngai/test-fr-accent-paths-nuxt-i18n

Steps to reproduce

git clone https://github.com/kngai/test-fr-accent-paths-nuxt-i18n
cd test-fr-accent-paths-nuxt-i18n
npm install
npm run dev

• Visit your app on http://localhost:3000/
• Click on button "Go to French test page (404)" (http://localhost:3000/fr/accessibilité-des-données)

What is Expected?

Visiting the URL: http://localhost:3000/fr/accessibilité-des-données should return a working page as described in /pages/sample_path_switcher.vue, just like http://localhost:3000/en/data-access.

What is actually happening?

Visiting http://localhost:3000/fr/accessibilité-des-données will show Not Found

If I remove accented characters in nuxtI18n.paths.fr configuration of my .vue page, the URL path works without the accented characters.
ie. fr: '/accessibilité-des-données' to fr: '/accessibilite-des-donnees'.

The nuxt-i18n documentation shows that we can use accented characters in the URL, so I'm trying to mimic this: https://i18n.nuxtjs.org/routing#in-component-options

[kngai]

Discovered that #969 has the same issue before me but in Hebrew.

The suggested solution in that thread fixed my issue:
npm install vue-router@3.4.8

Seems like as of this moment, the latest version of vue-router@3.4.9 breaks the non-ascii character routing as mentioned in #969 (comment). Hence we need to install an earlier version of vue-router.

I'll close this issue as it's not a bug with nuxt-i18n