Search code examples
vue.jsnuxt.jsnuxt-i18n

Optional slug in dynamic route using a folder


I'm currently working on the internalization of a website using Vue.js and the Nuxt frameworks. I'm moving from a page's url being website.com/my-page to website.com/<lang>/my-page.

To do so, and following the documentation, I've moved all my pages in a _lang folder, giving me the following architecture:

pages/
│
└───_lang
│     │ 
|     |__ my-page.vue
|
...

This works exactly as intended apart from the fact that the <lang> slug is now mandatory, making the access to website.com/my-page return a 404.

I would like for this url to show the page in the default language declared in my application.

The only way I found to achieve this is to create another my-page.vue at the root of pages/ containing the following:

<script>
import Mypage from '~/pages/_lang/my-page'
export default Mypage
</script>

However, this means creating this kind of alias for every pages of my website, giving me:

pages/
│
│─── my-page.vue
│
└───_lang/
│     │ 
|     |__ my-page.vue
|
...

Is there any way to make this automate as this is a very tedious process?

Thank you,

Side-note: I've been investigating extendRoutes without success.


Solution

  • You could use router-extras-module module.

    <router>
        alias:
            - /my-page
    </router>