How to handle localised dynamic route segments (slugs)

matsrietdijk
5
matsrietdijk
commented 2 years ago

How should localised dynamic route segments be handled or what is recommended?

We fetch articles from an external api and receive articles with available translations (including localised slugs for each available translation). I would like not to use Vuex to "fix" the slug in the global language switch which we use in the default layout.

0
paulgv
4.9k
paulgv
commented 2 years ago

Hi @matsrietdijk !
Do you mean to translate routes that contain dynamic fragments? If that's what you want to do, have a look at the Customize route section in the doc, there's an example with a slug parameter: https://nuxt-community.github.io/nuxt-i18n/routing/customize-routes.html

0
matsrietdijk
5
matsrietdijk
commented 2 years ago

Hey @paulgv, I'm actually trying to translate the :slug part.

0
paulgv
4.9k
paulgv
commented 2 years ago

Oh ok, in that case I think you should handle this API-side, it would be more flexible.
I guess you could also store all your slugs in your translation files and translate slugs in the default language before calling your API but that doesn't seem as convenient:

export default {
  async asyncData ({ params }) {
    const slug = this.$t(params.slug, this.$i18n.defaultLocale)
    let { data } = await axios.get(`https://my-api/posts/${slug}`)
    return { title: data.title }
  }
}
0
matsrietdijk
5
matsrietdijk
commented 2 years ago

@paulgv I can't really fix this API side as the slugs are only unique in combination with the locale. So I guess the only realistic way is using the Vuex store with some custom language switcher logic. Thanks any ways!

0
kamarkiewicz
13
kamarkiewicz
commented a year ago

I've just implemented this kind of feature in my project, in a way described by @matsrietdijk
Now one can have some reference here and example of how to connect that with dynamic routes.

0
Informations
Question โ€ข Unresolved
#c18 - Created 2 years ago