How to set lang attribute on html in Nuxt

There are two ways on how you can set lang attribute in Nuxt

For Nuxt 2

1. Within Nuxt config - nuxt.config.js.

                                
                                        // nuxt.config.js
export default {
  head: {
    htmlAttrs: {
      lang: 'en',
    },
  }
}
                                    
                            

2. Within script tag using Nuxt's Composition API.

                                
                                        <script lang="ts">
// import useMeta from Composition API
import { defineComponent, useMeta } from '@nuxtjs/composition-api';

export default defineComponent({
    setup() {
      useMeta({
        // ..
        htmlAttrs: {
          lang: 'en',
        },
     })
   }
})
</script>
                                    
                            

For Nuxt 3

1. Within Nuxt config - nuxt.config.ts.

                                
                                        // nuxt.config.ts
export default {
  app: {
    head: {
      // ..
      htmlAttrs: {
        lang: 'en',
      },
    }
  }
}
                                    
                            

2. Within script tag using useHead.

                                
                                        <script lang="ts" setup>
useHead({
  htmlAttrs: {
    lang: 'en',
  },
})
</script>
                                    
                            

Tags:Nuxt