⬅️ Back to Table of Contents

📄 index.ts

📊 Analysis Summary

Metric	Count
🔧 Functions	1
📦 Imports	7
📊 Variables & Constants	1
📐 Interfaces	1
📑 Type Aliases	1

📚 Table of Contents

• Imports
• Variables & Constants
• Functions
• Interfaces
• Type Aliases

🛠️ File Location:

📂 packages/core/useNavigatorLanguage/index.ts

📦 Imports

Name	Source
ComputedRef	vue
ShallowRef	vue
ConfigurableWindow	../_configurable
shallowRef	vue
defaultWindow	../_configurable
useEventListener	../useEventListener
useSupported	../useSupported

---

Variables & Constants

Name	Type	Kind	Value	Exported
navigator	Navigator	const	window?.navigator	✗

---

Functions

useNavigatorLanguage(options: ConfigurableWindow): Readonly<NavigatorLanguageState>

Code

export function useNavigatorLanguage(options: ConfigurableWindow = {}): Readonly<NavigatorLanguageState> {
  const { window = defaultWindow } = options

  const navigator = window?.navigator

  const isSupported = useSupported(() => navigator && 'language' in navigator)

  const language = shallowRef<string | undefined>(navigator?.language)

  // Listen to when to user changes language:
  useEventListener(window, 'languagechange', () => {
    if (navigator)
      language.value = navigator.language
  }, { passive: true })

  return {
    isSupported,
    language,
  }
}

• JSDoc:

  /**
   *
   * Reactive useNavigatorLanguage
   *
   * Detects the currently selected user language and returns a reactive language
   * @see https://vueuse.org/useNavigatorLanguage
   *
   */
  

• Parameters:

• options: ConfigurableWindow
• Return Type: Readonly<NavigatorLanguageState>
• Calls:
• useSupported (from ../useSupported)
• shallowRef (from vue)
• useEventListener (from ../useEventListener)
• Internal Comments:

  // Listen to when to user changes language: (x3)
  

---

Interfaces

NavigatorLanguageState

Interface Code

export interface NavigatorLanguageState {
  isSupported: ComputedRef<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: ShallowRef<string | undefined>
}

Properties

Name	Type	Optional	Description
isSupported	ComputedRef<boolean>	✗
language	ShallowRef<string | undefined>	✗

---

Type Aliases

UseNavigatorLanguageReturn

type UseNavigatorLanguageReturn = ReturnType<typeof useNavigatorLanguage>;

---