I'm using Nuxt JS/Vue to create an SEO friendly Server Side Rendered JS web app. Nuxt allows setting the head
option in each Vue component which it then take and via vue-meta
updates the page title. I get a user based on the route and then set the title
to the user's name. This works when running a local server. But when I push this up to Firebase I get the title
as undefined (on refresh).
Vue Component:
<template>
<div class="user">
<h3>{{ name }}</h3>
</div>
</template>
<script>
import axios from 'axios'
export default {
data () {
return {
title: 'test'
}
},
head () {
return {
title: this.name,
meta: [
{
hid: 'description',
name: 'description',
content: 'My custom description'
}
]
}
},
async asyncData ({ params, error }) {
try {
const { data } = await axios.get(`https://jsonplaceholder.typicode.com/users/${+params.id}`)
return data
} catch (e) {
error({ message: 'User not found', statusCode: 404 })
}
},
mounted () {
console.log(this.name)
this.title = this.name
}
}
</script>
I know that this is an old tread, but I just wanted to give some reasoning on the matter.. You can use both solutions:
head: { title : '' }
head() { return { title: '' }
BUT the difference between them is that when you use head as a property you won't be able to access
this
or any property you set inasyncData
ordata
methods, you will only be limited to text in main lines. The reason is that when you use it as a property it gets populated when the component gets constructed, which is actually before the data is set (on the server)When you use it as a method
head()
and return an object with the standart vue-meta properties, you can accessdata()
andasyncData()
set properties.