Getting started

Start localizing your app with VIntl in minutes.

Installing VIntl for Nuxt

To install VIntl for Nuxt, you'll need to install the @vintl/nuxt package:

npm install @vintl/nuxt

pnpm add @vintl/nuxt

yarn add @vintl/nuxt

Configuring Nuxt

In the nuxt.config.ts, under the modules key, add '@vintl/nuxt':

export default defineNuxtConfig({
  modules: ['@vintl/nuxt'],
})

Now, refresh Nuxt types to see intellisense for the new vintl property of nuxt.config.ts:

nuxi prepare

Configuring the module

Now that you have updated the types, you can use the vintl property in your nuxt.config.ts to configure the various aspects of VIntl.

Without this configuration our app won't start, so let's declare our locales and set the default locale:

export default defineNuxtConfig({
  modules: ['@vintl/nuxt'],
  vintl: {
    defaultLocale: 'en-US',
    locales: [
      {
        tag: 'en-US',
        file: './locales/en-US.json',
        meta: { displayName: 'English' },
      },
      {
        tag: 'uk',
        file: './locales/uk.json',
        meta: { displayName: 'Ukrainian' },
      },
    ],
  },
})

We will also create the locale files:

{
  "greeting": {
    "defaultMessage": "Hello, {username}!"
  }
}

{
  "greeting": {
    "defaultMessage": "Привіт, {username}!"
  }
}

Using the module

After configuring the module and creating our first locale files, we are ready to start using VIntl in our app.

Let's create a page vintl-test, where we will use our greeting message.

<script setup lang="ts">
const { formatMessage } = useVIntl()
</script>

<template>
  <div>
    {{ formatMessage('greeting', { username: 'world' }) }}
  </div>
</template>

Go to the page in your browser, and you should see the message ‘Hello, world!’.