javascript - NuxtJS page title not change - Stack Overflow

admin管理员组

文章数量:1300020

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 ponent, I removed that title and now it show nothing. I put this code in header ponent

<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.

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 ponent, I removed that title and now it show nothing. I put this code in header ponent

<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.

• javascript
• vue.js
• nuxt.js

Share Follow asked Sep 7, 2019 at 12:25 Jack The BakerJack The Baker 1,90333 gold badges2626 silver badges6363 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

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 e from head.title of your page like you already do.

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/api/pages-head/

I am using nuxt version 2.15.7. This syntax is working correctly for me:

nuxt.config.js file

head: {
        titleTemplate: '%s',
        title: 'info-book', // the title you define. you must put your package-name here, if you want that name. 
}

And then in the ponent that you want to define title dynamically, you have this code:

head() {
    return {
      title: "info-book - " + this.titleHead,
    }
},

data () {
  return {
    titleHead: "dynamic-title"
  }
},

本文标签： javascriptNuxtJS page title not changeStack Overflow