---
title: Internationalization in Nuxt
description: Learn how to set up basic internationalization using field-level translation within your Nuxt project.
url: https://www.storyblok.com/docs/quickstarts/nuxt/internationalization
---

# Internationalization in Nuxt

Learn how to create a basic implementation of field-level translation in a Nuxt project.

## Setup

In your space, open **Settings** → **Internationalization** → **Languages** and add `es` (Spanish).

-   In the article content type block schema, set the `title` and `content` fields as translatable.
-   Open each article, select the Spanish language, and provide translated content. You can also use [AI Translations](https://www.storyblok.com/docs/manuals/translations#generate-ai-translations).

> [!TIP]
> To learn more, check the [Internationalization concept](/docs/concepts/internationalization).

## Use the language parameter

To support language paths, update the `app/pages/[…slug].vue` file:

app/pages/\[...slug\].vue

```vue
<script setup>
const slug = useRoute().params.slug;

const availableLanguages = ["es"];
const language = availableLanguages.includes(slug[0]) ? slug[0] : undefined;

if (language) {
  slug.shift();
}

const { story } = await useAsyncStoryblok(slug && slug.length > 0 ? slug.join("/") : "home", {
  api: {
    version: "draft",
    resolve_relations: "featured-articles.articles",
    language,
  },
});
</script>

<template>
  <StoryblokComponent v-if="story" :blok="story.content" />
</template>
```

First, the code defines an array with all language codes configured in the space.

The language code is the first part of the `full_slug` of each language-specific story version, and the Visual Editor requests that path. For example, the Spanish version of `articles/example-article` becomes `es/articles/example-article`.

In the example code, if the first array element of the `slug` is in the `languages` array, it’s set as the language parameter for the API request. The first array element is subsequently removed so that the slug used for the API request doesn’t contain any language-specific information. The language is exclusively handled via the `language` parameter.

> [!NOTE]
> Note that this approach works for all stories except the home story, if it is defined as the root. Internationalization is highly implementation-specific, and how to handle the home story as well as other aspects is dependent on the exact project requirements. In Nuxt, you may, for example, want to create a static route `pages/es/index.vue` that takes precedence over the dynamic route `pages/[…slug].vue`. You can configure this static route to fetch the home story in Spanish, rendering it when users visit `https://example.com/es`.

## Related resources

[Concept: Internationalization](/docs/concepts/internationalization)

[Internationalization in Nuxt](https://i18n.nuxtjs.org/)

## Pagination

-   [Previous: Content Modeling in Nuxt](/docs/quickstarts/nuxt/content-modeling)
-   [Next: Integrate React with Storyblok](/docs/quickstarts/react)