An open API service indexing awesome lists of open source software.

https://github.com/paulgv/nuxt-i18n-routing

Localized routing with Nuxt.js
https://github.com/paulgv/nuxt-i18n-routing

i18n javascript nuxt routing vue

Last synced: about 2 months ago
JSON representation

Localized routing with Nuxt.js

Awesome Lists containing this project

README

        

# nuxt-i18n-routing

> Localized routing with Nuxt.js

## nuxt-i18n module

Check out [nuxt-i18n](https://github.com/paulgv/nuxt-i18n) module which is based on the work you'll find here.

## Info

This project showcases a way of achieving localized routing with Nuxt.js.
It's not fully tested and you should expect that this might not work for your specific needs. In particular, nested routing has not been tried at all and might require additional work to be properly supported.

### Configuration

In [`~/config/index.js`](config/index.js), we define the i18n configuration:

- `LOCALES` is an array of languages available in the app
- `DEFAULT_LOCALE` is the app's main language, routes for this language won't have a lang prefix
- `ROUTES_ALIASES` is an object where custom paths can be defined for generated routes, each key should match one of Nuxt's original routes name. Use this if you want to translate some URLs in the app, visit the "About" page to see this in action.

### Routes generator

In order to "localize" the routes, a generator function overrides all the routes that Nuxt generates by reading the `pages/` directory contents.
The generator is imported in `nuxt.config.js` and used in the `extendRoutes` method.

See the code in [`~/utils/router.js`](utils/router.js).

### Store

A small Vuex store module is used to persist user's locale preference accross pages.

See the code in [`~/store/i18n/`](store/i18n/).

### Plugin

A simple plugins is used to inialize [vue-i18n](https://github.com/kazupon/vue-i18n) which provides all translation features in the app.

See the code in [`~/plugins/vue-i18n.js`](plugins/vue-i18n.js).

### Middleware

A middleware, heavily inspired by [Nuxt's i18n example](https://nuxtjs.org/examples/i18n), handles language switching using the language from the URL.

See the code in [`~/middleware/i18n.js`](middleware/i18n.js).

### Mixin

A global mixin provides 2 methods responsible for generating links in the app:

- `getLocalizedRoute (route, locale)` – Returns the path corresponding to a given route for the request language. If `route` is a string, it will be used as the route's name. The route's name should correspond to the original name that was generated by Nuxt. Refer to [Nuxt doc](https://nuxtjs.org/guide/routing#basic-routes) to see how it generates routes names. If `locale` is omitted, the app's current locale is used.
- `getSwitchLocaleRoute (locale)` – Returns the URL of the current page for the requested language.

In Vue components, display links as follows:

```vue

{{ $t('labels.home') }}

{{ $t('categories.landscapes') }}

```

See the code in [`~/plugins/global-mixin.js`](plugins/global-mixin.js).

## Build Setup

``` bash
# install dependencies
$ yarn

# serve with hot reload at localhost:3000
$ yarn dev

# build for production and launch server
$ yarn build
$ yarn start

# generate static project
$ yarn generate
```

For detailed explanation on how things work, checkout the [Nuxt.js docs](https://github.com/nuxt/nuxt.js).