Localization

Make your site multilingual with <Localization>

On this page

Install nuxt-dynamic-route

Installation of nuxt-dynamic-route NPM Package

npx nuxi@latest module add nuxt-dynamic-route

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

Change Language

You can change the language with :locales in <LocaleNavItemDropdown>

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

Example

By adding #ja to the <template> in the <Localization>, 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>
      <LocalLink to="/lang-[lang]/extend/localization/#localLink">
        Jump Current Language Page
      </LocalLink>
    </Col>
    <Col auto>
      <LocalLink to="/lang-ja/extend/localization/#localLink">
        Jump Language [ja] Page
      </LocalLink>
    </Col>
    <Col auto>
      <LocalLink to="/lang-en/extend/localization/#localLink">
        Jump Language [en] Page
      </LocalLink>
    </Col>
    <Col auto>
      <b-p>Now: {{ $route.params.lang }}</b-p>
    </Col>
  </Row>
</template>