Localization

Create a lang-[lang] directory under the Pages directory and write code as usual in the lang-[lang] directory.

definePageMeta Script

Set Page Meta

vue/pages/**/*.vue

<script setup lang="ts">
definePageMeta({
 'title:en': 'Localization',
 'description:en': `Displays the page title and summary in the current language.`,
 'title:ja': '多言語対応',
 'description:ja': 'ページのタイトル、概要を現在の言語で表示します。',
});
</script>

<template>
 <div> Some page contents </div>
</template>

Retrieve Localized Page Meta

vue/pages/**/*.vue

<script setup lang="ts">
definePageMeta({
 'title:en': 'Localization',
 'description:en': `Displays the page title and summary in the current language`,
 'title:ja': '多言語対応',
 'description:ja': 'ページのタイトル、概要を現在の言語で表示します',
});
</script>

<template>
 <ViewState
  v-slot="title"
  src="localization://title"
 >
  <h1>{{ title.data }}</h1>
 </ViewState>
 <ViewState
  v-slot="description"
  src="localization://description"
 >
  <p class="lead">
   {{ description.data }}
  </p>
 </ViewState>
</template>

PageMeta component

vue

<template>
 <Localization>
  <template #en>
   <PageMeta
    title="Quick start"
    description="use-bootstrap is the front-end framework based on Nuxt3 and Bootstrap5."
   />
  </template>
  <template #ja>
   <PageMeta
    title="はじめる"
    description="use-bootstrap は、Nuxt3 と Bootstrap5 をベースにしたフロントエンド フレームワークです。"
   />
  </template>
 </Localization>
</template>

Change Language

You can change the language by using :locales in the <LocaleNavItemDropdown> component.

vue

<template>
 <NavbarNavList>
  <LocaleNavItemDropdown :locales="['En', 'Ja']" />
 </NavbarNavList>
</template>

Localization Content

By adding #ja to the <template> tag within the <Localization> component, the display will switch when the language setting is changed.

Hi! This is English

vue

<template>
 <Localization>
  <template #en>
   <h2>Hi! This is English</h2>
  </template>
  <template #ja>
   <h2>こんにちは! This is Japanese</h2>
  </template>
 </Localization>
</template>

LocalLink

Displays a page based on the current language setting

Jump Current Language Page

Jump Language [ja] Page

Jump Language [en] Page

Now: en

vue

<template>
 <Row>
  <Col auto>
   <Anchor
    to="/lang-[lang]/extend/components/localization/#localLink"
    dynamic-route
   >
    Jump Current Language Page
   </Anchor>
  </Col>
  <Col auto>
   <Anchor
    to="/lang-ja/extend/components/localization/#localLink"
   >
    Jump Language [ja] Page
   </Anchor>
  </Col>
  <Col auto>
   <Anchor
    to="/lang-en/extend/components/localization/#localLink"
   >
    Jump Language [en] Page
   </Anchor>
  </Col>
  <Col auto>
   <b-p>Now: {{ $route.params.lang }}</b-p>
  </Col>
 </Row>
</template>

Bootstrap