Seeking assistance to navigate through the complexities of Vue Router configurations! I've dedicated several days to integrating various resources, but have yet to achieve successful internalization implementation with URL routes in my unique setup.
Here's the rundown: My project features nested router-views structured as follows:
.
├── /step
│ ├── /1
│ ├── /2
│ └── /3
├── /join
└── /success
Here's a summary of my current progress:
- Upon app initialization, the default locale should display in the URL --> www.app.com/de and automatically redirect to /step. This logic is implemented in router index.js:
{
path: '/',
beforeEnter(to, from, next) {
next(i18n.locale + '/step')
}
},
and in i18n.js:
//global variable to check language support
export const supportedLangs = ["de", "en"];
// check what url user has arrived at, retrieves "en", "de" etc
let langParam = window.location.pathname.slice(1,3)
export default new VueI18n({
locale: supportedLangs.includes(langParam) ? langParam : 'de',
fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
messages: loadLocaleMessages(),
})
- Retrieve language parameter from the URL (links may direct users to my app with specific /de or /en parameters). This functionality is set up in router index.js:
{
path: '/:lang',
component: App,
beforeEnter(to, from, next) {
let lang = to.params.lang
if ( supportedLangs.includes(lang) ) {
if (i18n.locale !== lang) {
i18n.locale = lang
}
return next()
}
return next(i18n.locale)
}
}
I am encountering two issues that require assistance.
PROBLEM 1: Un-nested routes fail to render (e.g., www.app.com/de/join)
PROBLEM 2: Elements outside of App.vue content get duplicated, indicating incorrect route nesting (double app bar)
I have created a simplified code playground for reference -> HERE
Fingers crossed that someone can pinpoint where I might have gone astray!