routesFolder with param

[mathieu-gilloots]

Hello,
I'm developping a multilanguage website, and I would like some recommandations about the best practices to achieve that with unplugin-vue-router.

My files structure :

• pages/
  • index.vue < used to redirect user to the navigator language
  • [...all].vue < catch all with 404 for all other path
  • localized/
    • index.vue < /:lang/
    • contact.vue < /:lang/contact
      ...

My VueRouter definition :

VueRouter({
      extensions: ['.vue'],
      dts: 'src/typed-router.d.ts',
      routesFolder: [
        'src/pages',
        {
          src: 'src/pages/localized',
          path: ':lang/',
        },
      ],
    }),

Questions :

• How to allow only some :lang to be passed and redirect other input to [...all].vue
• Is it a good way to acheive my multi-language purpose ?
• How to automatically detect the :lang change in the url (for example : if user replace 'fr' to 'en') and make some actions (change i18n local for example), on any pages.

Thanks !

[posva]

You can pass a custom regexp to params (vue router): path: ':lang(en|es|fr)'. You could also validate them in a beforeEach guard. That allows to have a dynamic list rather than one set at built time, it depends on what you need.
You detect changes to the param with a watcher, like any other reactive property in vue.

<script setup>
const route = useRoute()
watch(() => route.params.lang, (lang, oldLang) => {
})
</script>

(imports omitted)

[mathieu-gilloots]

Thanks @posva seems to be good !