by Sai gowtham

How to set a page title in Nuxt

In this tutorial, we are going to learn about how to set a page title for the current page in nuxt.

Consider, we have an about page in our nuxt app and we need to set a title to it.

Setting the page title

To set a page title for the current page, we can use the head() method in nuxt application.

Note: Nuxt uses vue-meta package to update the html head tags.

Example:

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

<script>
export default {
  head() {
    return {
      title: "About page"    };
  },
};
</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