Package APIs
@i18n-micro/vue
Exported API of @i18n-micro/vue, generated from the source.
Vue 3 bindings for i18n-micro — composables, components, and routing helpers.
Entry points: @i18n-micro/vue, @i18n-micro/vue/router.
@i18n-micro/vue
Components
I18nGroup
const I18nGroup: DefineComponent
prefix
string required
groupClass
string
Default
''I18nLink
const I18nLink: DefineComponent
to
I18nRouteTarget required
activeStyle
CSSProperties
Default
{}localeRoute
(to: I18nRouteTarget, locale?: string) => string | { path?: string; }
I18nSwitcher
const I18nSwitcher: DefineComponent
customLabels
Record<string, string>
Default
{}customWrapperStyle
CSSProperties
Default
{}customButtonStyle
CSSProperties
Default
{}customDropdownStyle
CSSProperties
Default
{}customItemStyle
CSSProperties
Default
{}customLinkStyle
CSSProperties
Default
{}customActiveLinkStyle
CSSProperties
Default
{}customDisabledLinkStyle
CSSProperties
Default
{} · Inline style applied to the switcher button when the current locale is
marked as disabled: true in the locale config. Note: disabled locales are omitted from the dropdown list, but the current
locale label is still shown on the button.customIconStyle
CSSProperties
Default
{}locales
Locale[]
currentLocale
string | (() => string)
getLocaleName
() => string | null
switchLocale
(locale: string) => void
localeRoute
(to: string | { path?: string; }, locale?: string) => string | { path?: string; }
I18nT
function I18nT(props: I18nTProps): any
See I18nTProps
Composables
useI18n
Get the i18n instance from the Vue app context Returns the same instance that was created with createI18n()
function useI18n(options?: UseI18nOptions): { … }
instance
VueI18n required
locale
WritableComputedRef<string, string> required
getLocales
() => Locale[] required
defaultLocale
() => string required
getLocaleName
() => string | null required
localeRoute
(to: I18nRouteTarget, localeCode?: string) => I18nRouteTarget required
localePath
(to: I18nRouteTarget, locale?: string) => string required
switchLocale
(newLocale: string) => void required
t
(key: TranslationKey, params?: TranslateParams, defaultValue?: string | null, routeContext?: unknown) => CleanTranslation required
ts
(key: TranslationKey, params?: TranslateParams, defaultValue?: string, routeContext?: unknown) => string required
tc
(key: TranslationKey, count: number | Params, defaultValue?: string) => string required
tn
{ (value: number, options?: Intl.NumberFormatOptions): string; (value: number, key: string, overrides?: Intl.NumberFormatOptions): string; (value: number, key: string, locale: string, overrides?: Intl.NumberFormatOptions): string; } required
td
{ (value: Date | number | string, options?: Intl.DateTimeFormatOptions): string; (value: Date | number | string, key: string, overrides?: Intl.DateTimeFormatOptions): string; (value: Date | number | string, key: string, locale: string, overrides?: Intl.DateTimeFormatOptions): string; } required
tdr
(value: Date | number | string, options?: Intl.RelativeTimeFormatOptions) => string required
has
(key: TranslationKey, routeContext?: unknown) => boolean required
resolveTranslations
(routeContext?: unknown) => Translations required
setTranslation
(key: TranslationKey, value: unknown) => void required
setRoute
(routeName: string) => void required
getRoute
() => string required
getLocale
() => string required
addTranslations
(locale: string, translations: Translations, merge?: boolean) => void required
addRouteTranslations
(locale: string, routeName: string, translations: Translations, merge?: boolean) => void required
mergeTranslations
(locale: string, routeName: string, translations: Translations) => void required
clearCache
() => void required
See UseI18nOptions
useLocaleHead
function useLocaleHead(options?: UseLocaleHeadOptions): { … }
metaObject
Ref<{ htmlAttrs: { [x: string]: string | undefined; lang?: string | undefined; dir?: "ltr" | "rtl" | "auto" | undefined; }; link: ({ [x: string]: string | undefined; rel: "canonical"; href: string; } | { [x: string]: string | undefined; rel: "alternate"; href: string; hreflang: string; })[]; meta: { [x: string]: string; property: string; content: string; }[]; }, LocaleHead | { htmlAttrs: { [x: string]: string | undefined; lang?: string | undefined; dir?: "ltr" | "rtl" | "auto" | undefined; }; link: ({ [x: string]: string | undefined; rel: "canonical"; href: string; } | { [x: string]: string | undefined; rel: "alternate"; href: string; hreflang: string; })[]; meta: { [x: string]: string; property: string; content: string; }[]; }> required
updateMeta
(canonicalQueryWhitelist?: string[]) => void required
Functions
createI18n
function createI18n(options: CreateI18nOptions): I18nPlugin
See CreateI18nOptions · I18nPlugin
Classes
VueI18n
class VueI18n extends BaseI18n {
constructor(options: VueI18nOptions)
}
readonly storage
TranslationStorage
locale
Ref<string>
fallbackLocale
Ref<string>
currentRoute
Ref<string>
setRoute
(routeName: string) => void
getLocale
() => string
getFallbackLocale
() => string
getRoute
() => string
addTranslations
(locale: string, translations: Translations, merge = true) => void
addRouteTranslations
(locale: string, routeName: string, translations: Translations, merge = true) => void
mergeTranslations
(locale: string, routeName: string, translations: Translations) => void
protected touch
() => void
Every read depends on the revision, so
computed(() => t(key)) re-runs after a write.protected onTranslationsChanged
() => void
Called after every write (load, merge, set, clear): the one place adapters bump their reactivity.
locale is set when one locale's chunk was written, unset when anything may have changed.subscribeToChanges
(cb: () => void) => () => void
getStorage
() => TranslationStorage
getRouteCache
() => Record<string, Translations>
See BaseI18n · VueI18nOptions
Constants
I18nDefaultLocaleKey
const I18nDefaultLocaleKey: InjectionKey<string>
I18nInjectionKey
const I18nInjectionKey: InjectionKey<VueI18n>
See VueI18n
I18nLocalesKey
const I18nLocalesKey: InjectionKey<Locale[]>
See Locale
Types
I18nPlugin
type I18nPlugin = Plugin & { … }
global
VueI18n required
setRoutingStrategy
(strategy: I18nRoutingStrategy) => void required
I18nRouteTarget
A link target: a path with its query and hash, or a location (a named one needs a router that resolves names).
type I18nRouteTarget = string | {
path?: string;
name?: string | symbol;
params?: object;
query?: object;
hash?: string;
}
I18nRoutingStrategy
Routing strategy interface for i18n Implement this interface to integrate with any router library
interface I18nRoutingStrategy
getCurrentPath
() => string required
Returns current path (without locale prefix if needed, or full path)
Used for determining active classes in links
linkComponent
string | Component
Component to use for rendering links (e.g., RouterLink)
push
(target: { path: string; }) => void required
Function to navigate to another route/locale
replace
(target: { path: string; }) => void required
Function to replace current route
resolvePath
(to: I18nRouteTarget, locale: string) => string | { path?: string; }
Generate path for specific locale
toHref
(path: string) => string
href of a path from resolvePath, for a router that navigates by something else
(VitePress: paths are relative to the site base, the address bar is not)getRoute
() => { fullPath: string; query: Record<string, unknown>; }
(Optional) Get current route object for SEO/Meta tags
I18nTProps
interface I18nTProps
keypath
TranslationKey required
plural
number | string | null
tag
string
params
Record<string, string | number | boolean>
defaultValue
string
html
boolean
hideIfEmpty
boolean
customPluralRule
PluralFunc | null
number
number | string | null
date
Date | string | number | null
relativeDate
Date | string | number | null
UseI18nOptions
interface UseI18nOptions
locales
Locale[]
defaultLocale
string
UseLocaleHeadOptions
interface UseLocaleHeadOptions
addDirAttribute
boolean
identifierAttribute
string
addSeoAttributes
boolean
baseUrl
string | (() => string)
hreflangBaseLanguage
boolean
Default
false · Also emit bare-language hreflang tags derived from iso (never from routing code).VueI18nOptions
interface VueI18nOptions
locale
string required
fallbackLocale
string
messages
Record<string, Translations>
plural
PluralFunc
missingWarn
boolean
missingHandler
(locale: string, key: string, routeName: string) => void
numberFormats
NumberFormatsConfig
Named number formats per locale (
tn(n, 'currency')).datetimeFormats
DateTimeFormatsConfig
Named datetime formats per locale (
td(d, 'short')).timeZone
string
IANA zone for dates (
Europe/Berlin): set it so server and browser render one date.localeIso
Record<string, string>
BCP 47 tag per locale code, for plurals of a code that is no language tag.
createI18n fills it from locales.Re-exports
Declared in another package of this repository and documented on its page.
- From
@i18n-micro/core:defaultPlural·interpolate·FormatService - From
@i18n-micro/types:CleanTranslation·Getter·Locale·LocaleCode·Params·PluralFunc·Translations
@i18n-micro/vue/router
Also exports, as @i18n-micro/vue does: I18nRoutingStrategy.
Functions
createVueRouterAdapter
Factory for Vue Router adapter Implements routing utilities for Vue Router Uses vue-router APIs for navigation and path resolution
function createVueRouterAdapter(
router: Router,
locales: Locale[],
defaultLocale: string,
): I18nRoutingStrategy
See Locale · I18nRoutingStrategy
Generated from the TypeScript sources and their JSDoc by pnpm run docs:generate.
Back to all packages · Integration guides