Internationalization (i18n)

You can use the useTheme composable to configure internationalization in your .vitepress/theme/index.js file, or in any .md page/file. All values are optional.

<script setup lang="ts">
import { useTheme, locales } from 'vitepress-openapi'

useTheme({
  i18n: {
    locale: 'en', // en | es | pt-BR | string
    fallbackLocale: 'en', // en | es | pt-BR | string
    messages: {
      en: {
        ...locales.en,
        'custom i18n key': 'Custom i18n value',
      },
      es: {
        ...locales.es,
        'custom i18n key': 'Valor personalizado i18n',
      },
      'pt-BR': {
        ...locales['pt-BR'],
        'custom i18n key': 'Valor personalizado i18n',
    },
    availableLocales: [
      { code: 'en', label: 'English' },
      { code: 'es', label: 'Español' },
      { code: 'pt-BR', label: 'Português (Brasil)' },
    ],
  },
})
</script>

<!-- OASpec component or OAOperation component -->

If you're using the built-in VitePress i18n features, you can configure the locale as follows:

<script setup lang="ts">
import { useTheme } from 'vitepress-openapi'
import { useData } from 'vitepress'

const { lang } = useData()

useTheme({
  i18n: {
    locale: lang.value,
  },
})
</script>

<!-- OASpec component or OAOperation component -->

You can see a Live Example and the Source Code for more details.

OALocaleSelect component

You can use the OALocaleSelect component to render a select with the available locales. Keep in mind that this will change only vitepress-openapi components, not the entire VitePress site. For example, you can add it to Navbar in your .vitepress/config.js:

export default defineConfigWithTheme({
    themeConfig: {
        nav: [
            {
                component: 'OALocaleSelect',
            },
        ],
    },
})