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.
You could use router-extras-module module.
<router>
alias:
- /my-page
</router>