useNavigatorLanguage
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
Contributors
Anthony Fu
Michael J. Roberts