Skip to content

Commit

Permalink
fix: update docs (#1835)
Browse files Browse the repository at this point in the history
* fix: update docs

* update readme

* updates
  • Loading branch information
kazupon committed Feb 5, 2023
1 parent 2e41d59 commit 695054a
Show file tree
Hide file tree
Showing 22 changed files with 1,336 additions and 276 deletions.
4 changes: 2 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,9 @@

# Nuxt I18n

> Module i18n for Nuxt
> I18n module for Nuxt
The next `@nuxtjs/i18n` for Nuxt 3
The next i18n module for Nuxt 3

## ✅ Status: v8 beta

Expand Down
4 changes: 2 additions & 2 deletions docs/app.config.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
export default defineAppConfig({
docus: {
title: '@nuxtjs/i18n',
description: 'Module i18n (Internationalization) for Nuxt',
description: 'I18n (Internationalization) module for Nuxt',
url: 'https://v8.i18n.nuxtjs.org',
layout: 'default',
socials: {
Expand All @@ -24,7 +24,7 @@ export default defineAppConfig({
},
cover: {
src: '/cover.png',
alt: 'Module i18n for Nuxt'
alt: 'I18n module for Nuxt'
},
footer: {
credits: {
Expand Down
4 changes: 2 additions & 2 deletions docs/content/1.getting-started/1.setup.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,9 @@
::alert{type="warning"}
❗IMPORTANT

- From this section, this documentation is for `@nuxtjs/i18n` v8 beta. if you would like to use v7.x, see the [here](https://i18n.nuxtjs.org/)
- From this section, this documentation is for Nuxt i18n module (`@nuxtjs/i18n`) v8 beta. if you would like to use v7.x, see the [here](https://i18n.nuxtjs.org/)

- `@nuxtjs/i18n` next is still v8 **beta**, the API might subject to breaking changes. We will make every effort to have the same I/F as v7.x, but Nuxt 3 is a major release, it might not be the same I/F.
- Nuxt i18n module next is still v8 **beta**, the API might subject to breaking changes. We will make every effort to have the same I/F as v7.x, but Nuxt 3 is a major release, it might not be the same I/F.
::

::alert{type="info"}
Expand Down
8 changes: 4 additions & 4 deletions docs/content/1.getting-started/2.basic-usage.md
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
# Basic Usage

The basic to get started with @nuxtjs/i18n is to translate with Vue I18n via the `vueI18n` option.
The basic to get started with Nuxt i18n module is to translate with Vue I18n via the `vueI18n` option.

---

## Translate with Vue I18n

The basic to get started with **@nuxtjs/i18n** is to **translate with Vue I18n via the `vueI18n` option**
The basic to get started with **Nuxt i18n module** is to **translate with Vue I18n via the `vueI18n` option**

So, let's get started configuring the following nuxt config:

Expand Down Expand Up @@ -88,7 +88,7 @@ For more information on Vue I18n, refer to the [docs](https://vue-i18n.intlify.d

## Link localizing

**@nuxtjs/i18n** extends the integrated Vue I18n to give us some i18n features for Nuxt application. In here, we introduce one of those features, the link localization with extending Nuxt pages and routing.
**Nuxt i18n module** extends the integrated Vue I18n to give us some i18n features for Nuxt application. In here, we introduce one of those features, the link localization with extending Nuxt pages and routing.

### Configurations

Expand Down Expand Up @@ -122,7 +122,7 @@ In the link localizing, using the codes provided in the `locales` option as the
})
```

When rendering internal links in your app using `<NuxtLink>`, you need to get proper URLs for the current locale. To do this, **@nuxtjs/i18n** provides some helper composables:
When rendering internal links in your app using `<NuxtLink>`, you need to get proper URLs for the current locale. To do this, **Nuxt i18n module** provides some helper composables:

### URL path

Expand Down
6 changes: 3 additions & 3 deletions docs/content/1.index.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
title: I18n for Nuxt developers
description: I18n (Internationalization) for your Nuxt project powered by Vue I18n
title: I18n module for Nuxt
description: I18n (Internationalization) module for your Nuxt project powered by Vue I18n
layout: page
navigation: false
---
Expand All @@ -22,7 +22,7 @@ snippet: npm install @nuxtjs/i18n@next --save-dev
Nuxt [I18n]{.text-primary-400}

#description
[Module i18n](https://github.com/nuxt-community/i18n-module) for [Nuxt](https://nuxt.com)
[I18n module](https://github.com/nuxt-community/i18n-module) for [Nuxt](https://nuxt.com)

#extra
::list
Expand Down
5 changes: 3 additions & 2 deletions docs/content/2.guide/1.routing-strategies.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
# Routing & Strategies

@nuxtjs/i18n overrides Nuxt default routes to add locale prefixes to every URL with routing strategies.
Nuxt i18n module overrides Nuxt default routes to add locale prefixes to every URL with routing strategies.

---


## Routing

**@nuxtjs/i18n** overrides Nuxt default routes to add locale prefixes to every URL (except in `no_prefix` strategy).
**Nuxt i18n module** overrides Nuxt default routes to add locale prefixes to every URL (except in `no_prefix` strategy).

Say your app supports two languages: French and English as the default language, and you have the following pages in your project:

```asciidoc
Expand Down
2 changes: 1 addition & 1 deletion docs/content/2.guide/11.locale-fallback.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ How a fallback gets selected when a translation is missing.

---

**@nuxtjs/i18n** takes advantage of **Vue I18n** ability to handle localization fallback. It is possible to define a single fallback locale, an array of locales,
**Nuxt i18n module** takes advantage of **Vue I18n** ability to handle localization fallback. It is possible to define a single fallback locale, an array of locales,
or a decision map for more specific needs.

```js [nuxt.config.js]
Expand Down
4 changes: 2 additions & 2 deletions docs/content/2.guide/2.callbacks.md
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
# Callbacks

@nuxtjs/i18n exposes some callbacks that you can use to perform specific tasks that depend on the app's language.
Nuxt i18n module exposes some callbacks that you can use to perform specific tasks that depend on the app's language.

---

**@nuxtjs/i18n** exposes some callbacks that you can use to perform specific tasks that depend on the app's language.
**Nuxt i18n module** exposes some callbacks that you can use to perform specific tasks that depend on the app's language.

### `onBeforeLanguageSwitch`

Expand Down
4 changes: 2 additions & 2 deletions docs/content/2.guide/6.browser-language-detection.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Browser language detection

By default, @nuxtjs/i18n attempts to redirect users to their preferred language by detecting their browser's language. This is controlled by the `detectBrowserLanguage` option.
By default, Nuxt i18n module attempts to redirect users to their preferred language by detecting their browser's language. This is controlled by the `detectBrowserLanguage` option.

---

Expand Down Expand Up @@ -29,7 +29,7 @@ For better SEO, it's recommended to set `redirectOn` to `root` (which is the def

Browser language is detected either from `navigator` when running on client-side, or from the `accept-language` HTTP header. Configured `locales` (or locales `iso` and/or `code` when locales are specified in object form) are matched against locales reported by the browser (for example `en-US,en;q=0.9,no;q=0.8`). If there is no exact match for the full locale, the language code (letters before `-`) are matched against configured locales.

To prevent redirecting users every time they visit the app, **@nuxtjs/i18n** sets a cookie after the first redirection. You can change the cookie's name by setting `detectBrowserLanguage.cookieKey` option to whatever you'd like, the default is _i18n_redirected_.
To prevent redirecting users every time they visit the app, **Nuxt i18n module** sets a cookie after the first redirection. You can change the cookie's name by setting `detectBrowserLanguage.cookieKey` option to whatever you'd like, the default is _i18n_redirected_.

```js {}[nuxt.config.js]
i18n: {
Expand Down
4 changes: 2 additions & 2 deletions docs/content/2.guide/7.seo.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ When the `useLocaleHead` is called, @nuxtjs/i18n attempts to add some metadata t

## Introduction

**@nuxtjs/i18n** provides the `useLocaleHead` composable function. Calling this composable function returns a function which you can use to generate SEO metadata to optimize locale-related aspects of the app for the search engines.
**Nuxt i18n module** provides the `useLocaleHead` composable function. Calling this composable function returns a function which you can use to generate SEO metadata to optimize locale-related aspects of the app for the search engines.

Here are the specific optimizations and features that it enables:

Expand Down Expand Up @@ -176,7 +176,7 @@ useHead({

Generates `<link rel="alternate" hreflang="x">` tags for every configured locale. The locales' ISO codes are used as `hreflang` values.

A "catchall" locale hreflang link is provided for each locale group (e.g. `en-*`). By default, it is the first locale provided, but another locale can be selected by setting `isCatchallLocale` to `true` on that specific locale object in your **@nuxtjs/i18n** configuration. [More on hreflang](https://support.google.com/webmasters/answer/189077)
A "catchall" locale hreflang link is provided for each locale group (e.g. `en-*`). By default, it is the first locale provided, but another locale can be selected by setting `isCatchallLocale` to `true` on that specific locale object in your **Nuxt i18n module** configuration. [More on hreflang](https://support.google.com/webmasters/answer/189077)

An example without selected "catchall" locale:

Expand Down
4 changes: 2 additions & 2 deletions docs/content/2.guide/8.lazy-load-translations.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@ How to lazy-load translations.
---

For apps that contain a lot of translated content, it is preferable not to bundle all the messages in the main bundle but rather lazy-load only the language that the users selected.
This can be achieved with **@nuxtjs/i18n** by letting the module know where your translation files are located so it can dynamically import them when the app loads or when the user switches to another language.
To enable translations lazy-loading, follow these steps when configuring **@nuxtjs/i18n**:
This can be achieved with **Nuxt i18n module** by letting the module know where your translation files are located so it can dynamically import them when the app loads or when the user switches to another language.
To enable translations lazy-loading, follow these steps when configuring **Nuxt i18n module**:

- Set `lazy` option to `true` (or to [configuration object](#lazy-configuration-options) if you want to customize some options).
- Set `langDir` option to the directory (can not be empty) that contains your translation files.
Expand Down
8 changes: 4 additions & 4 deletions docs/content/2.guide/9.lang-switcher.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Lang Switcher

When **@nuxtjs/i18n** loads in your app, it adds your `locales` configuration to `nuxtApp.$i18n` (or `this.$i18n`), which makes it really easy to display a lang switcher anywhere in your app.
When **Nuxt i18n module** loads in your app, it adds your `locales` configuration to `nuxtApp.$i18n` (or `this.$i18n`), which makes it really easy to display a lang switcher anywhere in your app.

---

Expand Down Expand Up @@ -82,11 +82,11 @@ const availableLocales = computed(() => {

## Dynamic route parameters

Dealing with dynamic route parameters requires a bit more work because you need to provide parameters translations to **@nuxtjs/i18n**. For this purpose, **@nuxtjs/i18n** use params with configured by `definePageMeta`. That will be merged with route params when generating lang switch routes with `switchLocalePath()`.
Dealing with dynamic route parameters requires a bit more work because you need to provide parameters translations to **Nuxt i18n module**. For this purpose, **Nuxt i18n module** use params with configured by `definePageMeta`. That will be merged with route params when generating lang switch routes with `switchLocalePath()`.

::alert{type="warning"}

you did not set `dynamicRouteParams` option to `false` in **@nuxtjs/i18n**'s options.
you did not set `dynamicRouteParams` option to `false` in **Nuxt i18n module**'s options.

::

Expand Down Expand Up @@ -135,7 +135,7 @@ Note that catch all is defined **as the array**. In this case, there is only one

::alert{type="info"}

**@nuxtjs/i18n** won't reset parameters translations for you, this means that if you use identical parameters for different routes, navigating between those routes might result in conflicting parameters. Make sure you always set params translations in such cases.
**Nuxt i18n module** won't reset parameters translations for you, this means that if you use identical parameters for different routes, navigating between those routes might result in conflicting parameters. Make sure you always set params translations in such cases.

::

Expand Down
2 changes: 1 addition & 1 deletion docs/content/3.options/1.vue-i18n.md
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,6 @@ export default function (nuxt: NuxtApp) {

The `messages` option cannot be included in an object and exported with function due to limitations in Vue I18n v9 handling of locale messages.

As the workaround, you can use [lazy-load transtions](/guide/lazy-load-translations) in `@nuxtjs/i18n`. locale messages handled with lazy-load transtions will be loaded as locale messges inside Vue i18n.
As the workaround, you can use [lazy-load transtions](/guide/lazy-load-translations) in Nuxt i18n module. locale messages handled with lazy-load transtions will be loaded as locale messges inside Vue i18n.

::
Loading

0 comments on commit 695054a

Please sign in to comment.