Language switch best practise? about kirby-vue3-starterkit HOT 3 CLOSED

Hi there, great question!

Using <router-link> won't work, since we need a hard redirect. The Vue router is initialized with a base path, which is the language code in multi-lang setups. To redirect to another language we will have to re-visit the whole page and initialize the router again.

I've create an example language switcher component:

<template>
  <a
    v-for="language in languages"
    :key="language.code"
    :href="`/${language.code}/${route.path}`"
  >
    {{ language.name }}
  </a>
</template>

<script>
import { useRoute } from 'vue-router'
import { useSite, useLanguages } from '../hooks'

export default {
  setup () {
    const site = useSite()
    const route = useRoute()
    const { languageCode: currentCode } = useLanguages()
    const languages = site.languages.filter(({ code }) => code !== currentCode)

    return {
      route,
      languages
    }
  }
}
</script>

Hope that helps. Feedback appreciated.

Edit: Included the current path as well.

from kirby-vue3-starterkit.

Glad to hear it works. 🙂

Thanks, good catch. 👍 Changed: 9b96af2

from kirby-vue3-starterkit.

Hey! Such a swift response – thanks! It works! 😃

I had to change the

:href="`/${language.code}/${route.path}`"

to

:href="`/${language.code}${route.path}

without the second forward slash / otherwise the new URL has two forward slashes // before the path.
Like www.example.com/en//somepage

Thanks again for your fast handling!

from kirby-vue3-starterkit.