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

Question

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

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

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

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

Спасибо

Answer 1

Возможно, я опоздала, но это так же просто, как этот кусок кода в вашем layouts/default.vue:

export default {
    // other code...
    head() {
        return {
            htmlAttrs: {
                lang: this.$i18n.locale
            }
        }
    },
    // other code...
}

Answer 2

1. Установите vue-i18n npm

 npm install vue-i18n

2. создайте плагин в директории плагинов и добавьте приведенный ниже код. Например: 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')
        }
    })
}

3. Включите этот плагин в свой файл nuxt.config.js и установите язык

module.exports = {
    plugins: [{src: '~plugins/i18n.js', injectAs: 'i18n'}],
    head: {
        htmlAttrs: {
            lang: this.$i18n.locale,
        }
    }
}

4. Файл translations.json содержит ваш перевод в формате json

{
    "hello": "Hello World"
}

5. В файле компонента вы можете получить доступ к переводу, как показано ниже

<p>{{ $t("hello") }}</p>

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

Answer 3

Если вы используете nuxt-i18n, вы можете позвонить $nuxtI18nHead с addSeoAttributes: trueв вашем макете по умолчанию. Это установит lang атрибут, а также некоторые другие атрибуты заголовка, зависящие от языка, для лучшего SEO.

      export default {
    head() {
        return this.$nuxtI18nHead({ addSeoAttributes: true })   
    },
}

Источник: https://i18n.nuxtjs.org/seo#improving-performance