Access alternate_languages outside of page component

I'd like to access the current page's alternate_languages list in the layout, not the page, so I can pass it to a "language-switcher" button component.

Right now, I'm only querying the CMS in the page component like this:

const result = await $prismic.api.getSingle('test_homepage', { lang: 'en-ca' })

What's the best practice for making some of that result data available in the rest of the app? I could just put it in Vuex but I figure there might be an easier/automatic way provided by the Prismic module.

In the multi-language example site, they access the alternate_languages list like this:

      // Languages from API response
      let languages = $prismic.api.data.languages

But I don't know where or how $prismic.api.data is being set in that app. It's always undefined in my own app. And that's happening in a page component anyway, so I'd have the same issue.

How can I access the current page's alternate_languages from the layouts/ in a Nuxt app?

Hi @technical1,

I have done this in the past, but I can't remember how. I'll look into it tomorrow morning and let you know what I figure out. In the meantime, let me know if you've found a good way to handle this!

Sam

I left off before the weekend having just installed the Nuxt i18n module. The module automatically adds a url prefix like /en/ or /fr/, and the i18n object is available globally, so it should be easy to use that as the language I use when I make the Prismic API requests. I'll update here once I get further into it. Let me know what you ended up doing, and how it turned out!

Hey @technical1,

I looked through some of my old projects, and I always handled the language switcher in the page component. I did some research, and a lot of developers suggest passing data to the layout with an emit event. If you want, I could try to do a simple implementation of that as an example. Otherwise, it sounds like what you're doing should work, too.

Sam

I thought about that (emitting it and listening on the main component), but having the site language as a part of the global state made more sense for how I'd be using it throughout the layout. I think using the i18n module for Nuxt will be an even more elegant solution, and it will make the language available globally too :slight_smile:

1 Like

Great! I'm glad that's working for you.

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.