Multi language query SliceZone

Developing with Prismic
1

I am querying non-slice data using:

    const page = await $prismic.api.getByUID('page', uid, {
      lang: 'en-gb'
    })

which seems to work, however, I cannot see any options for slice zone to include the language. In my nuxt.config.js:

        apiOptions: {
          routes: [
            {
              type: 'page',
              path: '/:lang/:uid'
            }
          ]
        }

My folder structure is /_lang/_slug.vue including an index for the lang and an index.vue in the root of pages.

SliceZone:

    <SliceZone type="page" :uid="$route.name" />

Edit: It seems to work when I pass through the uid I get from page.uid, but not for the index page. It seems to retrieve the master language on the index page, even if I am using en-gb (not the master language).

I tried to input them as strings using index but because both the master language and en-gb have index it seems to use the master language. Interesting when I add a number, e.g. index1 the slice does not recognise, but the regular asyncData does.

Sorted. Use the slices prop:

<SliceZone type="page" uid="homepage" :slices="page.data.body" />

Any idea?

Cheers

1 Like
2

Good catch! I’ll add a way to pass params to the API calls, including the language to be retrieved :+1:

1 Like
3

Hey @jjames.home I released version 0.0.26-alpha.1 of our vue-slicezone, which adds a lang prop that you can pass to the slice-zone:

<slice-zone :lang="$route.params.lang" uid="homepage" />

Alternatively, you can pass the whole API params object:

<slice-zone :params="{ lang: 'fr-fr' }" uid="homepage" />

Let me know if it works for you :v:

2 Likes