سایت چند زبانه در nuxt js

سلام به جاوااسکریپتی های عزیز.

کارهایی که میخواهیم انجام بدیم:

• نصب کتابخانه vue-i18n
• نصب و کانفیگ
• ایجاد یه میدلویر برای رسیدگی به وضیعت زبان های مختلف
• ساخت فایل زبان ها

نصب کتابخانه vue-i18n

$ npm install vue-i18n --save

داخل پوشه plugins یه پلاگین جدید بسازید با عنوان : i18n.js

محتوای درونش:

import Vue from 'vue';
import VueI18n from 'vue-i18n';
Vue.use(VueI18n);
export default ({ app, store }) => {
  // Setup i18n
  app.i18n = new VueI18n({
    locale: store.state.locale,
    fallbackLocale: 'fa',
    messages: {
      'fa': require('~/locales/fa.json')
    }
  });
  app.i18n.path = (link) => {
    if (app.i18n.locale === app.i18n.fallbackLocale) {
      return `/${link}`;
    }
    return `/${app.i18n.locale}/${link}`;
  }
}

من زبان پیش فرض رو فارسی گذاشتم و شما میتونید هر چیز دیگه ای بزارید.

داخل store/index.js یه state تعریف میکنیم برای نگهداری زبان فعلی و زبان هایی که قراره داشته باشیم.

state: () => ({
  locales: ['fa','en'],
  locale: 'fa'
}),

اولی برای زبان هایی که داریم.

دومی زبان فعلی.

حالا تکه کد زیر رو تو قسمت mutations فایل store/index.js قرار بدید برای تغییر زبان فعلی:

mutations: {
  SET_LANG(state, locale) {
    if (state.locales.indexOf(locale) !== -1) {
      state.locale = locale
    }
  }
},

خب حالا باید پلاگینی که ساختیم رو داخل nuxt.config.js فراخوانی بکنیم:

module.exports = {
  build: { 
    vendor: ['vue-i18n'] 
  },
  router: {   
    middleware: 'i18n'   // برای اعمال بر روی تمامی مسیر ها
  },
  plugins: ['~/plugins/i18n.js'],
}

حالا نوبت ساختن فایل میدلویر هستش:

middleware/i18n.js

export default function({ isHMR, app, store, route, params, error, redirect }) {
  if (isHMR) { 
    return
  }
  else if (!params.lang) {//اگر پارامتر زبان وجود نداشته باشد اظافه میکند
    return redirect('/fa' + route.fullPath)
  }
  const locale = params.lang || 'fa'
  store.commit('SET_LANG', locale)
  app.i18n.locale = store.state.locale
}

حالا باید فایل زبان هارو بسازیم.

من یک فایل برای زبان فارسی و زبان انگلیسی میسازم و شما میتونید چندین زبان دلخواه خودتون رو بسازید.

locales/fa.json

{
  "links": {
    "home": "خانه",
    "about: "درباره ما"
  },
 "index": {    
     "title": "سلام دنیا", 
  }, 
}

locales/en.json

 {   "links": {     "home": "home",     "about: "about"   },  "index": {          "title": "Hello world!",    },  } 

حالا کافیه داخل پوشه pages یک پوشه بسازید با عنوان lang_ و بقیه صفحه هاتون رو داخل این قرار بدید.

برای صدا زدن محتوایی که تعریف کردیم برای مثال من یه صفحه ای ایجاد میکنم :

pages/_lang/index.vue

<template>
  <div>
      <h1 class="page_title">{{ $t('links.home') }}</h1>
     <nuxt-link class="navbar-item" :to="'/' + $i18n.locale + '/about'">{{$t('links.contact') }}</nuxt-link>
  </div>
</template>

export default {
  head() {
    return { title: this.$t('index.title') }
  }
}

بعضی وقت ها نیاز هستش که برای ترجمه ها یه پارامتر هم تعریف بکنیم که یه مقداری رو بهشون پاس بدیم، برای اینکار از روش زیر استفاده میکنیم:

 {   
 "links" : {   
   "home": "خانه شماره {number}",    
    "about: "درباره ما" 
      }, 
    "index": {         
     "title": "سلام دنیا",  
       },
     } 

موقع صدا زدن هم به این شکل:

<h1 class="page_title">{{ $t('links.home',{number:1}) }}</h1>

امیدوارم بدردتون بخوره.

موفق باشید.