Make your site multilingual with <Localization>
nuxt-dynamic-route
. Installation of nuxt-dynamic-route NPM Package
Create a lang-[lang] directory under Pages directory and write code as usual in lang-[lang] directory.
You can change the language with :locales
in <LocaleNavItemDropdown>
<template>
<NavbarNavList>
<LocaleNavItemDropdown :locales="['En', 'Ja']" />
</NavbarNavList>
</template>
By adding #ja
to the <template> in the <Localization>, the display will switch when the language setting is changed.
<template>
<Localization>
<template #en>
<h2>Hi! This is English</h2>
</template>
<template #ja>
<h2>こんにちは! This is Japanese</h2>
</template>
</Localization>
</template>
Displays a page based on the current language setting
<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>