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>