use-display-names

Localized names of languages, regions, scripts, currencies, calendars, and date-time fields (Intl.DisplayNames): "JP" → "Japan", "ja" → "日本語" in Japanese, "EUR" → "Euro".

Minimal setup

Use a Vue 3.5+ project with Vue SFC compilation configured (see Vite+ integration).

vp install @vizejs/composable

Import the entry directly. Call lifecycle-bound utilities inside <script setup> so cleanup follows the component scope; consult the runtime contract for this entry's SSR and hydration behavior.

import { useDisplayNames } from "@vizejs/composable/use-display-names";

Try it

Name a language

Show a language, region or currency name in the reader's language instead of a code.

Open the interactive example

What to observe: The code ja reads Japanese in English, Japanisch in German and 日本語 in Japanese. Try fr and pt-BR.

Set type to language, region, script or currency. of() formats any code on demand.

Compare the initial and interacted states

Copy the example

Save this complete SFC in your Vue project. Its public imports and source are the same ones executed in the preview.

<script setup lang="ts">
import { computed, ref } from "vue";
import { useDisplayNames } from "@vizejs/composable/use-display-names";

const locale = ref("en");
const code = ref("ja");
const { name } = useDisplayNames(
  code,
  computed(() => ({ type: "language" as const, locale: locale.value })),
);
</script>

<template>
  <div class="composable-example">
    <p>Name a language in the reader's own language instead of showing its code.</p>
    <label>
      Language code
      <select v-model="code">
        <option value="ja">ja</option>
        <option value="fr">fr</option>
        <option value="pt-BR">pt-BR</option>
      </select>
    </label>
    <label>
      Reader locale
      <select v-model="locale">
        <option value="en">English</option>
        <option value="de">German</option>
        <option value="ja">Japanese</option>
      </select>
    </label>
    <output aria-live="polite">{{ name }}</output>
  </div>
</template>

Runtime contract

API

useDisplayNames

Localized names of languages, regions, scripts, currencies, calendars, and date-time fields (Intl.DisplayNames): "JP" → "Japan", "ja" → "日本語" in Japanese, "EUR" → "Euro". Malformed codes yield undefined rather than the platform RangeError, so user-entered codes never crash rendering; invalid options still throw on first read. Derived state only: no listeners or timers, and deterministic during server rendering when the locale is explicit.

function useDisplayNames( code: MaybeRefOrGetter<string | null | undefined>, options: MaybeRefOrGetter<UseDisplayNamesOptions>, ): DisplayNamesControls

const { name } = useDisplayNames(regionCode, { type: "region", locale: "en" });

Types

UseDisplayNamesOptions

Options for useDisplayNames.

DisplayNamesControls

Reactive display names returned by useDisplayNames.