27 January, 2021

Change the Page Title

In NuxtJS, the page title is set to the same value as in nuxt.config.js

  head: {
    title: 'Phyrum Tea'
  }

When you want a common text, you can add titleTemplate: '%s - Tea.ch',

Add the head() function to the page to change the title for that page:

  head() {
    return {
      title: 'Privacy Policy'
    }
  }

When you load the content dynamically with asyncData, the title might be not known before the content is loaded. In this case define a variable that can be later updated. The variable title cannot be updated in the asyncData function.

  data() {
    return {
      title: 'Tea.ch Article'
    }
  },
  head() {
    return {
      title: this.title
    }
  }

I set the variable where it's used in the template like this:

<h1>{{ (title = article.title) && article.title }}</h1>