Templating 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 included the prismic-vue plugin in your project or that you are using the Prismic Vue.js starter. Check out the Integrating with existing project page to learn how to get setup.

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.