Skip to content
On this page

useNavigatorLanguage

Category
Last Changed
a month ago

Watch for changes being made to the navigator language preference by the user. Navigator.language MDN

Usage

import { defineComponent, ref } from 'vue'
import { useNavigatorLanguage } from '@vueuse/core'

export default defineComponent({
  setup() {
    const { language } = useNavigatorLanguage()

    watch(language, () => {
      // Listen to the value changing
    })

    return {
      language
    }
  }
})
import { defineComponent, ref } from 'vue'
import { useNavigatorLanguage } from '@vueuse/core'

export default defineComponent({
  setup() {
    const { language } = useNavigatorLanguage()

    watch(language, () => {
      // Listen to the value changing
    })

    return {
      language
    }
  }
})

Type Declarations

Show Type Declarations
export interface NavigatorLanguageState {
  isSupported: boolean
  /**
   *
   * ISO 639-1 standard Language Code
   *
   * @info The detected user agent language preference as a language tag
   * (which is sometimes referred to as a "locale identifier").
   * This consists of a 2-3 letter base language tag that indicates a
   * language, optionally followed by additional subtags separated by
   * '-'. The most common extra information is the country or region
   * variant (like 'en-US' or 'fr-CA').
   *
   *
   * @see https://www.iso.org/iso-639-language-codes.html
   * @see https://www.loc.gov/standards/iso639-2/php/code_list.php
   *
   */
  language: Ref<string | undefined>
}
/**
 *
 * Reactive useNavigatorLanguage
 *
 * Detects the currently selected user language and returns a reactive language
 * @see https://vueuse.org/useNavigatorLanguage
 *
 */
export declare const useNavigatorLanguage: (
  options?: ConfigurableWindow
) => Readonly<NavigatorLanguageState>
export declare type UseNavigatorLanguageReturn = ReturnType<
  typeof useNavigatorLanguage
>
export interface NavigatorLanguageState {
  isSupported: boolean
  /**
   *
   * ISO 639-1 standard Language Code
   *
   * @info The detected user agent language preference as a language tag
   * (which is sometimes referred to as a "locale identifier").
   * This consists of a 2-3 letter base language tag that indicates a
   * language, optionally followed by additional subtags separated by
   * '-'. The most common extra information is the country or region
   * variant (like 'en-US' or 'fr-CA').
   *
   *
   * @see https://www.iso.org/iso-639-language-codes.html
   * @see https://www.loc.gov/standards/iso639-2/php/code_list.php
   *
   */
  language: Ref<string | undefined>
}
/**
 *
 * Reactive useNavigatorLanguage
 *
 * Detects the currently selected user language and returns a reactive language
 * @see https://vueuse.org/useNavigatorLanguage
 *
 */
export declare const useNavigatorLanguage: (
  options?: ConfigurableWindow
) => Readonly<NavigatorLanguageState>
export declare type UseNavigatorLanguageReturn = ReturnType<
  typeof useNavigatorLanguage
>

Source

SourceDocs

Contributors

Anthony Fu
Michael J. Roberts

Changelog

v7.4.0 on 12/18/2021
63e13 - feat: new function (#1046)
useNavigatorLanguage has loaded