usePreferredLanguages

Category

Browser

Export Size

664 B

Last Changed

3 weeks ago

Reactive Navigator Languages. It provides web developers with information about the user's preferred languages. For example, this may be useful to adjust the language of the user interface based on the user's preferred languages in order to provide better experience.

Demo

sourceplayground (beta)

Preferred Languages:

en-US

Usage

import { usePreferredLanguages } from '@vueuse/core'

const languages = usePreferredLanguages()

Component Usage

This function also provides a renderless component version via the @vueuse/components package. Learn more about the usage.

<template>
  <UsePreferredLanguages v-slot="{ languages }">
    Preferred Languages: {{ languages }}
  </UsePreferredLanguages>
</template>

Type Declarations

/**
 * Reactive Navigator Languages.
 *
 * @see https://vueuse.org/usePreferredLanguages
 * @param options
 *
 * @__NO_SIDE_EFFECTS__
 */
export declare function usePreferredLanguages(
  options?: ConfigurableWindow,
): Ref<readonly string[]>

Source

Source • Demo • Docs

Contributors

Anthony Fu

SerKo

Antério Vieira

Fernando Fernández

Anthony Fu

vaakian X

wheat

Alex Kozack

Changelog

v13.6.0 on 7/28/2025

d32f8 - refactor: add @__NO_SIDE_EFFECTS__ annotations to all pure functions (#4907)

v12.4.0 on 1/10/2025

dd316 - feat: use passive event handlers everywhere is possible (#4477)

v12.0.0-beta.1 on 11/21/2024

0a9ed - feat!: drop Vue 2 support, optimize bundles and clean up (#4349)