by Sai gowtham

How to set a lang attribute on a HTML in Nuxt

In this tutorial, we are going to learn about how to set a lang attribute on a html element in the nuxt app.

Example:

<html lang="en">

Setting the lang attribute

To set a lang attribute to an <html> element, we need to use the htmlAttrs property inside the nuxt.config.js file head object.

nuxt.config.js
export default {
  mode: "universal",
  target: "server",

  head: {
    title: "My Lab App" || "",
    htmlAttrs: {
      lang: "en",  // it sets the language English    },
  }

  // other config
}

This above code sets the lang attribute to the all pages in your nuxt app.

If you want to set a lang attribute to the particular nuxt page, you can do it like this.

About.vue
<template>
  <div>
    <h1>This is the About page</h1>
  </div>
</template>

<script>
export default {
  head() {
    return {
      title: "About page",
      htmlAttrs: {
        lang: "ar",      },
    };
  }
};
</script>

Top Udemy Courses

JavaScript - The Complete Guide 2020 (Beginner + Advanced)
JavaScript - The Complete Guide 2020 (Beginner + Advanced)
45,614 students enrolled
52 hours of video content
View Course
React - The Complete Guide (incl Hooks, React Router, Redux)
React - The Complete Guide (incl Hooks, React Router, Redux)
284,472 students enrolled
40 hours of video content
View Course
Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)
Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)
130,921 students enrolled
21 hours of video content
View Course