How do I update to correct language version when in edit mode?

CodeThirtyTwo · November 2, 2020, 8:01pm

I’m using field-level language translations on the Storyblok side and Nuxt on the front end using the i18n nuxt plugin for multi-language support.

My question is, when you select the different languages in the Storyblok page editor, is there a way using the story bridge to update the front end language variant to match while editing? i.e. /es, /ru etc?

Any help would be much appreciated.

Hannes · November 3, 2020, 3:22pm

Hello CodeThirtyTwo,

you can get the actual shown language from the _storyblok_lang parameter which is being send from the editor when accessing a story. There are more information about that here: https://www.storyblok.com/docs/guide/essentials/visual-editor#additional-query-params

It is also possible to take a look at the parameters send when you access one of your own stories in the editor by checking the network tab of your browser:

Inside of your Nuxt app you can access the values of the parameters from the actual context like in this code snippet:

github.com

storyblok/nuxtjs-multilanguage-website/blob/master/pages/de/articles/_slug.vue#L37


  this.$storybridge.on(['published', 'change'], (event) => {
    // window.location.reload()
    this.$nuxt.$router.go({
      path: this.$nuxt.$router.currentRoute,
      force: true,
    })
  })
},
asyncData (context) {
  // Load the JSON from the API
  let version = context.query._storyblok || context.isDev ? 'draft' : 'published'

  return context.app.$storyapi.get(`cdn/stories/de/articles/${context.params.slug}`, {
    version: version
  }).then((res) => {
    return res.data
  }).catch((res) => {
    if (!res.response) {
      console.error(res)
      context.error({ statusCode: 404, message: 'Failed to receive content form api' })
    } else {