Multi-Language info

This page shows how to retrieve the language code and the alternate language versions of
a document.

Before Reading

This page assumes that you have already retrieved a document from your Prismic repository and stored it in a variable named document.

Get the document language code

You can get the language code of a document by accessing its lang property. This might give "en-us" (American English) or "fr-fr" (French) for example:

Copy
const languageCode = document.lang;

Get the alternate language versions

Next we will see how to access the information about a document's alternate language versions. You can get the alternate languages using the alternate_languages property. Then simply loop through the array and access the ID, UID, type and language code of each as shown below:

Copy
document.alternate_languages.forEach(function (altLang) {
  const id = altLang.id;
  const uid = altLang.uid;
  const type = altLang.type;
  const languageCode = altLang.lang;
});

Get a specific alternate language version

Here's an example of how to get a specific alternate language version of a document. In this example we want the French version:

Copy
const getAlternateLanguage = function (document, languageCode) {
  for (const altLang of document.alternate_languages) {
    if (altLang.lang === languageCode) {
      return altLang;
    }
  }
  return null;
};

const frenchAltLang = getAlternateLanguage(document, 'fr-fr');
const frenchDocId = frenchAltLang.id;
const frenchDocUid = frenchAltLang.uid;
const frenchDocType = frenchAltLang.type;

Vue Router: Reacting to params changes

If your component is retrieving content from the Prismic API based on one of the route params, make sure to take a look at our Reacting to params changes page.

To learn more about the Multi-Language feature check out the user guide.