Locale

Scopes a locale to a component subtree for localized sections of your app.

Installation

Install the Locale plugin in your app’s entry point:

import { createApp } from 'vue'
import { createLocalePlugin } from '@vuetify/v0'
import App from './App.vue'

const app = createApp(App)

app.use(
  createLocalePlugin({
    default: 'en',
    messages: {
      en: {
        hello: 'Hello',
        welcome: 'Welcome, {name}!',
      },
      es: {
        hello: 'Hola',
        welcome: '¡Bienvenido, {name}!',
      },
    },
  })
)

app.mount('#app')

Usage

Wrap any section of your template in <Locale> to override the active locale for that subtree. Children calling useLocale() will see the scoped locale as the current selection, and t() / n() calls will resolve against the scoped locale — not the parent’s.

<script setup lang="ts">
  import { Locale } from '@vuetify/v0'
</script>

<template>
  <Locale locale="fr">
    <!-- Everything here sees "fr" as the active locale -->
    <slot />
  </Locale>
</template>

Anatomy

<script setup lang="ts">
  import { Locale } from '@vuetify/v0'
</script>

<template>
  <Locale />
</template>

Examples

Recipes

Renderless Mode

When renderless is set, the component does not render a wrapper element. Instead, it passes attrs (including data-locale and lang) via the slot scope for you to bind to your own element:

<script setup lang="ts">
  import { Locale } from '@vuetify/v0'
</script>

<template>
  <Locale locale="fr" renderless v-slot="{ attrs }">
    <section v-bind="attrs">
      No extra wrapper div
    </section>
  </Locale>
</template>

Accessibility

Locale sets the lang attribute on its wrapper element — or exposes it via attrs in renderless mode — to match the scoped locale. This is a genuine accessibility affordance: assistive technology reads lang to select the correct pronunciation and voice, satisfying WCAG 3.1.2 Language of Parts↗︎. It also sets a data-locale attribute for styling and selection.

Beyond lang, Locale is a headless context provider — it adds no roles, keyboard behavior, or interactive elements. In renderless mode you are responsible for binding attrs (which includes lang) to your own element, so the language information reaches the accessibility tree.

FAQ