CODEWITHSUNDEEP
htmlvue.jsnuxt.js
Cas
Cas

Reputation: 174

Nuxt: Head function not working for title or meta tags

I have a webpage built in Nuxt and for different pages I would like to have different titles in the head and different meta descriptions. How do I do this?

I found the head() method in the Nuxt documentation, but this doesn't seem to be working for me.

in my contact.vue:

export default class Contact extends Vue {
   head() {
      return {
         title: 'Contact page',
         meta: [
            { hid: 'description', name: 'description', content: 'This is a contact page' }
         ]
      }
   }
}

And in my nuxt.config.js:

head: {
    title: 'My website',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
    ],
}

I would expect this, according to the documentation, to generate meta tags. But it just shows the title and meta description declared in the nuxt.config.js. What am I missing here?

Upvotes: 5

Views: 4154

Answers (1)

Cas
Cas

Reputation: 174

I figured it out. In the component I put the head method inside the class. This didn't work. When I put it in the Component decorator, like so:

 @Component({
    head(): object {
      return {
        title: this.$i18n.t('meta.home.title'),
        meta: [
          {
            hid: 'description', 
            name: 'description',
            content: this.$i18n.t('meta.home.description') 
          },   
        ]
      }
    }
  })
  export default class Home extends Vue {
   ...
}

it did work.

At first I got an error 

Object literal may only specify known objects and 'head' does not exist in type 'ComponentOptions'

This is fixed by extending the ComponentOptions like so:

 declare module "vue/types/options" {
    interface ComponentOptions<V extends Vue> {
      head?: etc etc
    }
  }

Upvotes: 0

Related Questions