Search code examples
javascripthtmlvue.jsnuxt.jsvue-meta

How to set lang attribute on html element with Nuxt?


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?


Solution

  • 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?