Jan 30, 2024 Author - Sai gowtham

How to set a lang attribute on a HTML in Nuxt

nuxt1min read

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>