Multi Language website and getSingle

Developing with Prismic
1

Hi there, I am creating a multi language website in English and Spanish (using slice machine)

My pages folder structure setup is as below:

pages/
├─ _lang/
│ ├─ index.vue
│ ├─ _uid.vue
│ ├─ visit/
│ │ ├─ index.vue

├─ _uid.vue
├─ index.vue
├─ visit/
│ ├─ index.vue

Homepage & _uid work fine, but I'm running into problems with accessing the Spanish versions of the /visit/ page using $prismic.api.getSingle.

I can access the English page perfectly at http://localhost:3000/en-us/visit

But when I switch language to Spanish it comes unstuck at: http://localhost:3000/es-ar/visitar with a 'This page could not be found' error

However using the english doc.uid http://localhost:3000/es-ar/visit/ works

I don't want to hardcode anything and for this project, I really need dynamic UID's between languages

_lang/visit/index.vue is setup as follows:

 async asyncData({ $prismic, params, error }) {
    const visit = await $prismic.api.getSingle("visit", { lang: params.lang });

    const translations = visit.alternate_languages;

    return { visit, translations, lang: visit.lang };
  },

And my link-resolver as below:

export default function (doc) {

  if (doc.type === "home") {
    return `/${doc.lang}`;
  }

  if (doc.type === "page") {
    return `/${doc.lang}/page/${doc.uid}`;
  }

  if (doc.type === "visit") {
    return `/${doc.lang}/${doc.uid}`;
  }

  return "/not-found";
}

What am I doing wrong here? :woozy_face:

Any tips would be greatly appreciated!

2

Hello @grafik, are you missing a _uid.vue file inside visit/ ?
Please refer to our Nuxt internationalization documentation for some information:

4

Hi Pau, thanks,

I've added those files inside /visit/, so my structure is now as follows:

pages/
├─ _lang/
│ ├─ index.vue
│ ├─ _uid.vue
│ ├─ visit/
│ │ ├─ index.vue
│ │ ├─ _uid.vue

├─ _uid.vue
├─ index.vue
├─ visit/
│ ├─ index.vue
│ ├─ _uid.vue

But I still get the same error on http://localhost:3000/es-ar/visitar

Screen Shot 2022-11-01 at 10.29.20 AM
Screen Shot 2022-11-01 at 10.29.20 AM912×582 14.1 KB

Where http://localhost:3000/es-ar/visit works fine (but obviously has the wrong slug)

I also tried adding a route resolver as per that example you sent, but that doesn't appear to help:

apiOptions: {
      routes: [
        {
          type: "home",
          path: "/:lang?",
        },
        {
          type: "page",
          path: "/:lang?/:uid",
        },
        {
          type: "visit",
          path: "/:lang?/:uid",
        },
      ],
    },
5

I also noticed in the example here: Internationalization with Nuxt - Documentation - Prismic

That the 'about' page is not a single type, more like a _page repeatable type, any examples of a single types that are not the homepage?

6

Hi there, any further insights would be greatly appreciated.

Should I be using predicate as opposed to getSingle ?

7

I ended up using a single _uid for all the pages, and then I build each page with slices.

It seems that the multi-language does not work with Single content types.