Nuxt.js: Dynamic routes using regexp with extendRoutes inside nuxt.config.js

[FabianEllenberger]

I'm facing a quite similar issue as mentioned here: https://github.com/nuxt/nuxt.js/issues/112

My goal is to have dynamic routes with lang and slug :lang/:slug. To achieve this I want to replace my :lang routes with a simple regex :lang([a-z]{2}) via the extendRoutes function inside the nuxt.config.js. Which then should only accept :lang with max. 2 characters, everything else should be read as a :slug.

The routes seem to be created correctly, for example:

{ 
  name: 'lang',
  path: '/:lang([a-z]{2})',
  component: '/Users/fabian/dev/intrinsic/pages/_lang/index.vue',
  chunkName: 'pages/_lang/index'
},
{
  name: 'slug',
  path: '/:slug',
  component: '/Users/fabian/dev/intrinsic/pages/_slug.vue',
  chunkName: 'pages/_slug'
},
{
  name: 'lang-slug',
  path: '/:lang([a-z]{2})/:slug',
  component: '/Users/fabian/dev/intrinsic/pages/_lang/_slug.vue',
  chunkName: 'pages/_lang/_slug'
}

But for example if I navigate to /test, I end up having test as my lang param and the router sends me to the :lang page.

Q: Is it possible to use regex inside extendRoutes at the moment with nuxt? Does anyone have an idea on how to achieve dynamic routes with :lang/:slug if the lang always consists of 2 characters (and is optional)?

Many thanks in advance! 🙏🏻

_{This question is available on Nuxt.js community (#c1734)}

[paulgv]

Hi, I created a small project to show how I handle routes translation with Nuxt, it's far from perfect but it might give you some ideas. Check the README for some details on how it works.
https://github.com/paulgv/nuxt-i18n-routing

[FabianEllenberger]

@paulgv Sorry for the late response! Thanks so much for this nice showcase, that was exactly what i was looking for! 🙏🏻🙏🏻

[paulgv]

@FabianEllenberger I'm glad it helped! :)
I recently made a module to bundle all these features: https://github.com/paulgv/nuxt-i18n

[FabianEllenberger]

@paulgv whoo, chapeau good sir!

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.