NuxtJS - Set head title/description on mounted?

NuxtJS - Set head title/description on mounted?

nuxt head
nuxt conditional head
nuxt vue-meta
nuxt pages
nuxt config
nuxt js dynamic head
nuxt favicon
vue-meta dynamic title
mounted() {
  // threads is a constant file
  this.thread = threads.find(t => t.id === this.$route.params.id)
},
data() {
  return {
    thread: null
  }
},
head: {
  title: this.thread.title,
  meta: [
    {
      hid: 'description',
      name: 'description',
      content: this.thread.body
    }
  ]
},

Basically, I have a constant file of json "threads" and I want to use it's properties to set head - title/description.

I'm getting this error: Cannot read property 'thread' of undefined


From the head documentation, type is Object or Function

So if you reformat your code a bit, you could write head like this

head() {
  const thread = threads.find(t => t.id === this.$route.params.id)

  return {
    title: thread ? thread.title : '',
    meta: [
      {
        hid: 'description',
        name: 'description',
        content: thread ? thread.body : ''
      }
    ]
  }
},

API: The head Method, Nuxt.js uses vue-meta to update the headers and HTML attributes of your application. Use the head method to set the HTML Head tags for the current page. not work { hid: 'description', name: 'description', content: 'My custom description' }  Use the head method to set the HTML Head tags for the current page. Your component data are available with this in the head method, you can use set custom meta tags with the page data. Be sure to also take a look at the Nuxt FAQ.


aznable Apparently you must remove null from here

thread: null => thread: ""

and insert this inside async methods

   async getId() {
    this.thread = await threads.find(t => t.id === this.$route.params.id)
   }

Best !

API: The head Property, Nuxt.js let you define all default meta for your application inside nuxt.config.js. Info: To avoid duplicated meta tags when used in child component, set up a  Do not use `vmid` for it as it will not work { hid: 'description', name: 'description', content: 'Meta description'} ] } } To know the list of options you can give to head, take a look at vue-meta documentation. You can also use head as a function in your components to access the component data through this .


You should define thread in data method

data () {
  return {
    thread: {
      body: '',
    }
  }
}

Also, the head should be define as method, not a property.

head () {
  return {
    meta: [
      {
        hid: 'description',
        name: 'description',
        content: this.thread.body
      }
    ]
  }
}

API Reference, HTML Metadata manager for Vue.js. Once a component is destroyed, vue-meta will update the meta information to If you call addApp.set on the client before the app is mounted, the tags will be metaInfo: { script: [{ type: 'application/ld+​json', json: { '@context': 'http://schema.org', '@type': 'Organization', name: 'NuxtJS' }  SEO HTML Head example with Nuxt.js. Nuxt JS Newsletter. Get the latest Nuxt news to your inbox, curated by the core team and contributors.


Views, The Views section describes all you need to configure data and views for a specific route in your Nuxt.js Application (Document, Layouts, Pages and HTML Head). More information about the layout property: API Pages layout the page }, head () { // Set Meta Tags for this Page }, // and more functionality to discover . You can include your external resources in the head object or function. As described in the head API docs , the following examples shows the use of head as an object and as a function. If you want to use values from your Vue component like computed properties or data, you can use the head() function, returning the final head object.


Duplicated Meta tags?, For the meta description, you need to add the unique identifier hid so vue-meta will know that it has to overwrite the default tag. Your nuxt.config.js : head: { title:​  # head v2.3+ arguments ln (type boolean, default: false) This is a convenience method which will retrieve the template string which should be added to the head. Elements will be printed in the same order as the menu below. By passing ln = true a line break will be added after each element. This could be helpful e.g. during development to get a


Best Practices for Nuxt.js SEO - Vue Mastery, It's a technical article on how to best set up meta tags and redirects in your Note: Nuxt.js uses head for the name of the property. vue-meta uses { hid: '​description', name: 'description', content: 'About our company Nuxt.js ' } By default, Nuxt.js is configured to cover most use cases. This default configuration can be overwritten with the nuxt.config.js file.. build. This option lets you configure various settings for the build step, including loaders, filenames, the webpack config and transpilation.