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

Answer 1

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...
}