How to set lang attribute on html element with Nuxt?

Question

Using the file nuxt.config.js file, head contents can be customized to add some meta, or other things:

module.exports = {
  /*
  ** Headers of the page
  */
  head: {
    title: 'awesome title',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'Nuxt.js project' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
  ...
}

But I can't find anything in the documentation to set attributes on the html element -- I want to set the lang attribute. Is there a way to do that?

Try [Declaring language in HTML tag · Issue #388 · nuxt/nuxt.js](https://github.com/nuxt/nuxt.js/issues/388) — yuriy636, Jan 13 '18 at 09:30
@yuriy636 it worked. Would you make it an answer so I can accept it? — rocambille, Jan 13 '18 at 10:44

yuriy636 · Accepted Answer · 2023-04-11T20:45:41.393

98

Source: Declaring language in HTML tag · Issue #388 · nuxt/nuxt.js

head supports a htmlAttrs property. It will map each key:value of the object as attribute:value

module.exports = {
  head: {
    htmlAttrs: {
      lang: 'en'
    }
  }
}

How to do this when using i18n: Setting the language attribute when using i18n and Nuxt?

edited Apr 11 '23 at 20:45

answered Jan 13 '18 at 11:22

yuriy636

11,171
5
37
42

25

What if you are using different languages (locales)? – JMK Jun 02 '18 at 10:33
1

This also work with Body bodyAttrs and Head headAttrs – Dan May 22 '20 at 15:42
Yes, like @JMK said, what if using i18n with different locales ? – Vinny Apr 11 '23 at 13:26
@Vinny Looks like he created a separate question for that. Check https://stackoverflow.com/questions/50656053/setting-the-language-attribute-when-using-i18n-and-nuxt – yuriy636 Apr 11 '23 at 20:44

score 17 · Answer 2 · edited Oct 20 '22 at 13:37

17

In Nuxt 3 type in the component

<script setup>
useHead({
  htmlAttrs: {
    lang: 'en',
    style: 'font-size: 13px'
  }
})
</script>

https://v3.nuxtjs.org/getting-started/seo-meta/

edited Oct 20 '22 at 13:37

Adarsh Madrecha

6,364
11
69
117

answered Apr 30 '22 at 09:42

Daniel

7,684
7
52
76

Thanks! This isn't documented in https://v3.nuxtjs.org/getting-started/seo-meta/ – caiohamamura Nov 18 '22 at 16:21
It is mentioned, but now displying is bugged https://github.com/nuxt/framework/issues/9178 – Daniel Nov 18 '22 at 19:34
I see, they changed link to docs and now there are two different methods (in component and in nuxt config), in april there was no option to add it by globally like today. – Daniel Nov 18 '22 at 19:39

score 3 · Answer 3 · answered Jan 21 '23 at 21:16

Add htmlAttrs to nuxt.config.js

export default defineNuxtConfig({
    app: {
        head: {
            htmlAttrs: {
                lang: 'en',
            },
            title: 'title',
            charset: 'utf-8',
            meta: [],
            link: [],
        }
    },
})

How to set lang attribute on html element with Nuxt?

3 Answers3

Linked