Multi language menu & footer - nuxt/slice-machine

Developing with Prismic
1

Greetings, I'm having some troubles figuring out how to fetch the menu & footer in the corresponding locale. I basically followed exactly what's on the tutorial:

but at the actual fetching here:

const menu = (await $prismic.api.getSingle('menu', { lang: 'it' })).data

everything works fine codewise, but I'd need to pass the language dynamically.

I can't figure out how to read the current language from the middleware as the locale always seems undefined from within the actual fetching functions scope. What's the correct way to pass the locale?

the actual code for the fetch call is:

export const state = () => ({
  menu: {},
  footer: {},
})

export const mutations = {
  SET_MENU(state, menu) {
    state.menu = menu
  },
  SET_FOOTER(state, footer) {
    state.footer = footer
  },
  SET_ERROR_MENU(state, error) {
    state.menu = error
  },
  SET_ERROR_FOOTER(state, error) {
    state.footer = error
  }
}

export const actions = {
  async fetchMenu({ commit }, $prismic) {
    try {
      const menu = (await $prismic.api.getSingle('menu', { lang: 'it' })).data

      commit('SET_MENU', menu)
    } catch (e) {
      const error = 'Please create a menu document'

      commit('SET_ERROR_MENU', error);
    }
  },
  async fetchFooter({ commit }, $prismic) {
    try {
      const footer = (await $prismic.api.getSingle('footer', { lang: 'it' })).data

      commit('SET_FOOTER', footer)
    } catch (e) {
      const error = 'Please create a footer document'

      commit('SET_ERROR_FOOTER', error);
    }
  }
}

set in /store/index.js

I really appreciate any help you can provide, thank you.

2

Hey Marco, thanks for reaching out.

With @nuxtjs/prismic you can directly read the locales from $prismic into your page queries, like so:

// Example /_lang/_uid.vue file

[...]

  async asyncData({ $prismic, params, error }) {
    try {
      // All langs from the repo
      let languages = $prismic.api.data.languages

      // Set main language as default
      let lang = { lang: languages[0].id }

      // If there is a lang code in the URL set this as language option
      if (params.lang !== undefined || null) {
        lang = { lang: params.lang }
      }

      // Query to get localized menu content
      const menuContent = (await $prismic.api.getSingle('menu', lang ))

[...]

We have a full working example of this that you can check out here: Nuxt multi-language website