seo Question posted in
Some basic information to get you started with this can be found here.

Nuxt JS SSR title undefined – SEO

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>
Tags:

3

Answers


  1. 0

    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},
            ]
        }
    }
    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
  3. 0

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

    1. Globaly in nuxt.config.ts/js file
    export default defineNuxtConfig({
   meta: {
       title: "Nuxt 3",
   }
})
    1. 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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search