NuxtJS page title not change

Question

I'm working on a nuxtJS project and not much know about nuxt or vue, what I want is change page title, but it show one title for all page, that title belong to one component, I removed that title and now it show nothing. I put this code in header component

<script>
    export default {
    name: "header",
    head () {
        return {
            title: this.title
        }
    },
    data () {
        return {
            title: 'Hello World!'
        }
    }
    }
</script>

and in nuxtjs config :

module.exports = {
  head: {
    title: pkg.name
}
...
}

What I want, show title of each page dynamically.

Answer 1

Your nuxt.config.js override title set in your page.

You should use titleTemplate in nuxt.config.js:

head: {
  titleTemplate(titleChunk) {
    return titleChunk ? titleChunk : pkg.name
  }
}

By this way, you can also format title for every page with you site name:

head: {
  titleTemplate(titleChunk) {
    return titleChunk ? `{pkg.name} - ${titleChunk}` : pkg.name
  }
}

titleChunk come from head.title of your page like you already do.

Answer 2

There are only option to set the title dynamic base on your pages is like override the head function Let me show you one example here

export default {
  ...
  head () {
    return {
      title: 'YOUR PAGE TITLE',
      meta: [
        { hid: 'og-title', property: 'og:title', content: 'YOUR PAGE TITLE },
        ...
      ]
    }
  }
}

To prevent the overwrite parent meta fields, your hid should be unique

For more information, please visit the official document of the NuxtJs: https://nuxtjs.org/api/pages-head/