Setting the language attribute when using i18n and Nuxt?

Question

With Nuxt, you can set the language HTML attribute inside the nuxt.config.js file like so:

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

However, what should you do if you have a multi-language app? Is there any way to set the language attribute based on the locale?

I thought that maybe document.documentElement.setSttribute('lang', 'language-code') would work, but as nuxt is rendered server side, it doesn't seem to have access to the documentElement object.

Thanks

score 13 · Answer 1 · answered Nov 04 '19 at 14:11

Maybe I'm late, but it's just as simple as this chunk of code in your layouts/default.vue:

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

Sk_ · Answer 2 · 2018-06-02T15:05:13.790

2

Install vue-i18n npm

 npm install vue-i18n

create a plugin in the plugin dir and add the below code. Eg: 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')
        }
    })
}

Include this plugin in your nuxt.config.js file and set the lang

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

translations.json file contain your translation in json format

{
    "hello": "Hello World"
}

In component file, you can access the translation as below

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

Note: I didnt tested the code

edited Jun 02 '18 at 15:05

answered Jun 02 '18 at 14:37

Sk_

1,051
8
18

1

Thanks, although I don't think this actually sets the Language attribute in the ** tag. I'm asking because this seems to be important for screenreaders etc (and Wave shows it as an error). – JMK Jun 02 '18 at 14:49
this is not what OP asked for – tomJO Sep 07 '18 at 11:29
1

How can you use this.$i18n within nuxt.config.js? This does not work for me. – remino Sep 17 '18 at 11:16
Okay. You can use this.$i18n for head, but head must be a function returning an object instead of only being an object. – remino Sep 17 '18 at 11:44
As @remino said earlier, `$i18n` is not available through `nuxt.config.js` so the answer won't work as expected. – SMAKSS Jul 16 '20 at 05:01

score 2 · Answer 3 · answered Apr 02 '21 at 20:51

If you're using nuxt-i18n, you can call $nuxtI18nHead with addSeoAttributes: true in your default layout. This will set the lang attribute as well as some other language-specific header attributes for better SEO.

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

Source: https://i18n.nuxtjs.org/seo#improving-performance

Setting the language attribute when using i18n and Nuxt?

3 Answers3

Linked