Components
<i18n-switcher>
The <i18n-switcher> component is a dropdown of the enabled locales, each linking to the current page in that locale.
<i18n-switcher> renders a button with the active locale and a dropdown of all enabled locales, including the active one. Use it for a ready-made language menu; build your own from $getLocales and $switchLocalePath when you need different markup. Each entry links to the current page in that locale.
Props and slots
customLabels
Record<string, string>
Default
() => ({}) · Display name per locale code, overriding the displayName from the locale config.customWrapperStyle
CSSProperties
Default
() => ({}) · Inline style for the outer wrapper.customButtonStyle
CSSProperties
Default
() => ({}) · Inline style for the button that opens the dropdown.customDropdownStyle
CSSProperties
Default
() => ({}) · Inline style for the dropdown panel.customItemStyle
CSSProperties
Default
() => ({}) · Inline style for each item in the dropdown.customLinkStyle
CSSProperties
Default
() => ({}) · Inline style for the link inside an item.customActiveLinkStyle
CSSProperties
Default
() => ({}) · Inline style for the link of the currently active locale.customDisabledLinkStyle
CSSProperties
Default
() => ({}) · Inline style for the current locale button when it is disabled: true in config.customIconStyle
CSSProperties
Default
() => ({}) · Inline style for the caret icon on the button.Slots
before-button
Content before the button that opens the dropdown.
before-selected-locale
Content before the active locale label inside the button.
after-selected-locale
Content after the active locale label inside the button.
before-dropdown
Content between the button and the dropdown panel.
before-dropdown-items
Content at the top of the dropdown, above the locale list.
before-item
Content before each locale entry.Bindings
localebefore-link-content
Content before a locale's label inside its link.Bindings
localeafter-link-content
Content after a locale's label inside its link.Bindings
localeafter-item
Content after each locale entry.Bindings
localeafter-dropdown-items
Content at the bottom of the dropdown, below the locale list.
after-dropdown
Content after the dropdown panel.
Behaviour
- Lists every locale without
disabled: true, the active one included. - Each entry is an
<a>to$switchLocalePath(code). A path resolves underapp.baseURL; a localebaseUrlon another domain stays absolute. It hashreflangandlangset toiso || code,dirwhen the locale has one,aria-current="page"on the current locale, and classswitcher-locale-<code>. A click calls$switchLocale(code)and closes the dropdown; with a modifier key it is left to the browser. - The list stays in the server HTML, hidden, so crawlers see the links. Escape or a click outside closes it.
- Label:
customLabels[code], then the locale'sdisplayName, then the code (with a dev warning). - Styles: small inline defaults (bordered white button and panel, the active entry bold and blue). Each
custom*Styleprop is applied after the default of its part. The button has the classesi18n-switcher-buttonandlanguage-switcher, the wrapperi18n-switcher-wrapper, the listi18n-switcher-dropdown. Positions use logical CSS properties, sodir="rtl"works.
Example
<template>
<i18n-switcher
:custom-labels="{ en: 'English', de: 'Deutsch' }"
:custom-button-style="{ borderRadius: '4px' }"
>
<template #before-link-content="{ locale }">
<img :src="`/flags/${locale.code}.svg`" alt="" width="16" />
</template>
</i18n-switcher>
</template>