Composables

Composition API for Nuxt i18n module.

useLocalePath

The useLocalePath composable returns function that resolve the locale path. useLocalePath is powered by vue-i18n-routing.

example:

<script setup>
const localePath = useLocalePath()
</script>
<template>
  <NuxtLink :to="localePath('index')">{{ $t('home') }}</NuxtLink>
</template>

Type

declare function useLocalePath(): (route: RawLocation | RouteLocation, locale?: Locale) => string;

useLocaleRoute

The useLocaleRoute composable returns function that resolve the locale route. useLocaleRoute is powered by vue-i18n-routing.

example:

<script setup>
const localeRoute = useLocaleRoute()
const { locale } = useI18n()
const linkPath = computed(() => {
  const route = localeRoute('blog', locale.value)
  return route != null ? route.path : '/'
})
</script>
<template>
  <NuxtLink :to="linkPath">{{ $t('blog') }}</NuxtLink>
</template>

Type

declare function useLocaleRoute(): (route: RawLocation | RouteLocation, locale?: Locale) => Route | RouteLocation & { href: string; } | undefined;

useSwitchLocalePath

The useSwitchLocalePath composable returns function that resolve the locale location. useSwitchLocalePath is powered by vue-i18n-routing.

example:

<script setup>
const switchLocalePath = useSwitchLocalePath()
</script>
<template>
  <NuxtLink :to="switchLocalePath('en')">English</NuxtLink>
  <NuxtLink :to="switchLocalePath('fr')">Français</NuxtLink>
</template>

Type

declare function useSwitchLocalePath(): (locale?: Locale) => string;

useLocaleHead

The useLocaleHead composable returns localized head properties for locale-related aspects.useLocaleHead is powered by vue-i18n-routing.

example:

<script setup>
const i18nHead = useLocaleHead({
  addSeoAttributes: {
    canonicalQueries: ['foo']
  }
})
useHead({
  htmlAttrs: {
    lang: i18nHead.value.htmlAttrs!.lang
  },
  link: [...(i18nHead.value.link || [])],
  meta: [...(i18nHead.value.meta || [])]
})
</script>

Type

declare function useLocaleHead(options: I18nHeadOptions): Ref<I18nHeadMetaInfo>;

Parameters

options

An object accepting the following optional fields:

• addDirAttribute
  Type: Boolean
  Adds a dir attribute to the HTML element. default false.
• addSeoAttributes
  Type: boolean | SeoAttributesOptions
  Adds various SEO attributes. default false.
• identifierAttribute
  Type: String
  Identifier attribute of <meta> tag, default 'hid'.

useRouteBaseName

The useRouteBaseName composable returns function that get the route base name. useRouteBaseName is powered by vue-i18n-routing.

example:

<script setup>
const route = useRoute()
const getRouteBaseName = useRouteBaseName()
const baseRouteName = computed(() => {
  return getRouteBaseName(route)
})
</script>
<template>
  <p>route base name: {{ baseRouteName }}
</template>

Type

declare function useRouteBaseName(): (givenRoute?: Route | RouteLocationNormalizedLoaded) => string | undefined;

useBrowserLocale

The useBrowserLocale composable returns the browser locale.

If this composable function is called on client-side, it detects the locale from the value of navigator.languages.

Else on the server side, the locale is detected from the value of accept-language header.

Type

declare function useBrowserLocale(): string | null;

useCookieLocale

The useCookieLocale composable returns the cookie locale.

If this composable function is called on client-side, it detects the locale from the value of document.cookie via useCookie. else on the server side, the locale is detected from the value of cookie header.

Note that if the value of detectBrowserLanguage.useCookie is false, an empty string is always returned.

Type

declare function useCookieLocale(): Ref<string>;