Merge pull request #9 from hisasann/feature/add-i18n

Feature/add i18n

Author: hisasann

nuxt.config.ts

@@ -56,7 +56,8 @@ module.exports = {
     '@/plugins/axios.ts',
     '@/plugins/constants-inject.ts',
     '@/plugins/env-inject.ts',
-    '@/plugins/vue-lazyload.ts'
+    '@/plugins/vue-lazyload.ts',
+    '@/plugins/i18n.ts'
   ],
 
   /*
@@ -134,6 +135,8 @@ module.exports = {
     // ログインの必要のない画面でも middleware が実行されるので注意が必要
     // middleware: 'check-auth',
 
+    middleware: 'i18n',
+
     extendRoutes(routes: any, resolve: any): void {
       // https://ja.nuxtjs.org/api/configuration-router/#extendroutes
       if (routers && routers.length > 0) {

package.json

@@ -66,6 +66,7 @@
     "nuxt-env": "^0.1.0",
     "nuxt-property-decorator": "^2.1.3",
     "ts-node": "^8.0.3",
+    "vue-i18n": "^8.10.0",
     "vue-lazyload": "^1.2.6"
   },
   "devDependencies": {

src/locales/ja.json

@@ -0,0 +1,13 @@
+{
+  "text": {
+    "home": {
+      "title": "これはタイトルです",
+      "hello": "こんにちは"
+    }
+  },
+  "error": {
+    "home": {
+      "errorMessage": "これはエラーメッセージです"
+    }
+  }
+}

src/middleware/i18n.ts

@@ -0,0 +1,42 @@
+/**
+ * SSR でロケールを決定するためのミドルウェア
+ * @param isHMR
+ * @param app
+ * @param store
+ * @param route
+ * @param params
+ * @param error
+ * @param redirect
+ */
+export default function({
+  isHMR,
+  app,
+  store,
+  route,
+  params,
+  error,
+  redirect
+}): void {
+  const defaultLocale = app.i18n.fallbackLocale
+  // If middleware is called from hot module replacement, ignore it
+  if (isHMR) {
+    return
+  }
+
+  // Get locale from params
+  const locale = params.lang || defaultLocale
+  if (store.state.i18n.locales.indexOf(locale) === -1) {
+    return error({ message: 'This page could not be found.', statusCode: 404 })
+  }
+  // Set locale
+  store.commit('i18n/SET_LANG', locale)
+  app.i18n.locale = store.state.locale
+  // If route is /<defaultLocale>/... -> redirect to /...
+  // if (locale === defaultLocale && route.fullPath.indexOf('/' + defaultLocale) === 0) {
+  //   const toReplace = '^/' + defaultLocale + (route.fullPath.indexOf('/' + defaultLocale + '/') === 0 ? '/' : '')
+  //   const re = new RegExp(toReplace)
+  //   return redirect(
+  //     route.fullPath.replace(re, '/')
+  //   )
+  // }
+}

src/pages/example/i18n.vue

@@ -0,0 +1,20 @@
+<template lang="pug">
+section
+  h1.title
+    | i18n
+  p {{ $t('text.home.hello') }}
+  p {{ $t('error.home.errorMessage') }}
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'nuxt-property-decorator'
+
+@Component
+export default class extends Vue {
+  public head() {
+    return {
+      title: this.$t('text.home.title')
+    }
+  }
+}
+</script>

src/pages/example/index.vue

@@ -62,6 +62,9 @@ section
   p
     nuxt-link(to='/example/user-agent')
       | user-agent
+  p
+    nuxt-link(to='/example/i18n')
+      | i18n
 </template>
 
 <script lang="ts">

src/plugins/constants-inject.ts

@@ -1,5 +1,5 @@
 /**
- * 定数をグローバルにセットする
+ * @file 定数をグローバルにセットする
  */
 // https://ja.nuxtjs.org/guide/plugins
 

src/plugins/env-inject.ts

@@ -1,3 +1,7 @@
+/**
+ * @file 環境変数をグローバルにセットする
+ */
+
 import { Context } from '@nuxt/vue-app'
 
 export default (context: Context): void => {

src/plugins/i18n.ts

@@ -0,0 +1,28 @@
+/**
+ * @file i18n をグローバルにセットする
+ */
+
+import Vue from 'vue'
+import VueI18n from 'vue-i18n'
+
+Vue.use(VueI18n)
+
+export default ({ app, store }): void => {
+  // Set i18n instance on app
+  // This way we can use it in middleware and pages asyncData/fetch
+  app.i18n = new VueI18n({
+    locale: store.state.locale,
+    fallbackLocale: 'ja',
+    messages: {
+      ja: require('~/locales/ja.json')
+    }
+  })
+
+  // app.i18n.path = (link) => {
+  //   if (app.i18n.locale === app.i18n.fallbackLocale) {
+  //     return `/${link}`
+  //   }
+  //
+  //   return `/${app.i18n.locale}/${link}`
+  // }
+}

src/store/i18n.ts

@@ -0,0 +1,26 @@
+/**
+ * store 用インターフェイス
+ */
+export interface StateInterface {
+  locales: string[]
+  locale: string
+}
+
+/**
+ * state
+ */
+export const state = (): StateInterface => ({
+  locales: ['ja'],
+  locale: 'ja'
+})
+
+/**
+ * mutations
+ */
+export const mutations = {
+  SET_LANG(state, locale): void {
+    if (state.locales.indexOf(locale) !== -1) {
+      state.locale = locale
+    }
+  }
+}