Задать атрибут языка при использовании i18n и Nuxt? - PullRequest
Новая
       22

Задать атрибут языка при использовании i18n и Nuxt?

0 голосов
/ 02 июня 2018

С помощью Nuxt вы можете установить языковой атрибут HTML внутри файла nuxt.config.js следующим образом: 

module.exports = {
  head: {
    htmlAttrs: {
      lang: 'en-GB',
},
... etc etc

Однако что делать, если у вас есть несколько-языковое приложение?Есть ли способ установить атрибут языка на основе локали?

Я думал, что, возможно, document.documentElement.setSttribute('lang', 'language-code') будет работать, но, поскольку nuxt отображается на стороне сервера, он, похоже, не имеет доступа к объекту documentElement..

Спасибо

1 Ответ

0 голосов
/ 02 июня 2018
  1. Установка vue-i18n npm 
 npm install vue-i18n
создайте плагин в директории плагинов и добавьте приведенный ниже код.Например: i18n.js 
import Vue from 'vue' 

import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

export default ({app}) => {
    app.i18n = new ueI18n({
        locate: 'ja',
        fallbackLocale: 'en',
        silentTranslationWarn: true,
        message: {
            'ja': require('~/locale/ja/translations.json'),
             'en': require('~/locale/en/translations.json')
        }
    })
}
Включите этот плагин в файл nuxt.config.js и установите язык 
module.exports = {
    plugins: [{src: '~plugins/i18n.js', injectAs: 'i18n'}],
    head: {
        htmlAttrs: {
            lang: this.$i18n.locale,
        }
    }
}
Файл translations.json содержит ваш перевод в формате json 
{
    "hello": "Hello World"
}
В файле компонента вы можете получить доступ к переводу, как показано ниже 
<p>{{ $t("hello") }}</p>

Примечание. Я не проверял код

...