Navigator Languages

The Navigator Languages 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.

State

The usePreferredLanguages function exposes the following reactive state:

import { usePreferredLanguages } from 'vue-use-web';

const languages = usePreferredLanguages();

State	Type	Description
languages	String[]	An array of user preferred languages

Example

<template>
  <h1>Preferred Languages: </h1>
  <ul>
    <li :key="language" v-for="language of languages">{{language}}</li>
  </ul>
</template>

<script>
import { usePreferredLanguages } from 'vue-use-web';

export default {
  setup() {
    const languages = usePreferredLanguages();

    return { languages };
  }
};
</script>