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 adir
attribute to the HTML element. defaultfalse
.addSeoAttributes
Type:boolean | SeoAttributesOptions
Adds various SEO attributes. defaultfalse
.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>;