Nuxt JS SSR title undefined

Question

Nuxt JS SSR title undefined

3.7k views Asked by Auzy At 27 December 2024 at 10:51

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>

Original Q&A

There are 3 answers

**knif3r** · Answer 1 · 2019-08-26T08:18:40+00:00

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 in asyncData or data 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 access data() and asyncData() set properties.

**Mayank Joshi** · Answer 2 · 2018-07-10T08:29:24+00:00

I am having the same issue and I solved using this. Add the below code in your page in script tag under export default {}.

head () {
        return {
            title: this.metaTitle,
            meta: [
                { hid: 'description', name: 'description', content: this.metaDescription },
                { name: 'keywords', content: this.metaTags},
            ]
        }
    }

**Bipu** · Answer 3 · 2022-10-01T07:59:14+00:00

If you are using nuxt 3 then you can define your title 3 way

Globaly in nuxt.config.ts/js file

export default defineNuxtConfig({
   meta: {
       title: "Nuxt 3",
   }
})

Localy into .vue files
a. Form <script setup> useMeta({ title: 'ROAST - Home' }) </script>
b. Into template tag(under 1st div):
```
<template>
   <div>
     <Head> 
       <Title>Nuxt 3</Title>
     </Head>
   </div>
</template>
```

TechQA.

Nuxt JS SSR title undefined

There are 3 answers

Related Questions in JAVASCRIPT

Related Questions in VUE.JS

Related Questions in VUEJS2

Related Questions in NUXT.JS

Popular Questions

Popular Tags

Trending Questions