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.
vue
<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
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
Tip
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:
vue
<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>Was this page helpful?