Locale
Scopes a locale to a component subtree for localized sections of your 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>
<!-- Wrapper mode (default) -->
<Locale locale="fr">
<div>French-scoped content</div>
</Locale>
<!-- Renderless mode -->
<Locale locale="es" renderless v-slot="{ attrs }">
<section v-bind="attrs">Custom element</section>
</Locale>
</template>Examples
Scoped Override
Nest <Locale> components to create layered locale contexts. Each card reads its scoped locale independently via useLocale().
| File | Role |
|---|---|
LocaleCard.vue | Consumer — reads useLocale() to display translated content |
LocaleSection.vue | Wrapper — uses <Locale> to scope a locale to a section |
scoped-override.vue | Entry — sets up locales and nests scoped overrides |
Root context (en)
Hello — Welcome to our app
3 items selected
Goodbye, World!
Bonjour — Bienvenue dans notre application
3 éléments sélectionnés
Au revoir, World !
Hola — Bienvenido a nuestra aplicación
3 elementos seleccionados
¡Adiós, World!
Hola — Bienvenido a nuestra aplicación
3 elementos seleccionados
¡Adiós, World!
Scoped translations t() and n() are fully scoped. A <Locale locale="fr"> subtree resolves all translations against the French messages, even when nested inside another <Locale> override. Each scope is independent.
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>