Nuxt/examples/head-elements

Updating headers with Nuxt.js

Nuxt.js uses vue-meta to update the headers and html attributes of your applications.

Nuxt.js configures vue-meta with these options:

{
  keyName: 'head', // the component option name that vue-meta looks for meta info on.
  attribute: 'n-head', // the attribute name vue-meta adds to the tags it observes
  ssrAttribute: 'n-head-ssr', // the attribute name that lets vue-meta know that meta info has already been server-rendered
  tagIDKeyName: 'hid' // the property name that vue-meta uses to determine whether to overwrite or append a tag
}

Updating the title

To update the title of the page, just add head.title in your page component.

pages/index.vue

<template>
  <h1>Home page 🚀</h1>
</template>

<script>
export default {
  head: {
    title: 'Home page 🚀'
  }
}
</script>

Meta tags and more

To know the list of options you can give to head, take a look at vue-meta documentation.

Using data values inside head

You might want to use the component data to display different headers, like a post title for example. Just use head as a function and you can use this inside to access your component data.

Example of displaying the post title:

<script>
export default {
  data ({ params }) {
    // fetch the post from the API
    return axios.get(`https://my-api/posts/${params.id}`)
    .then((res) => {
      return { title: res.data.title }
    })
  },
  head () {
    return {
      title: this.title
    }
  }
}
</script>

Defaults metas

Nuxt.js let you define all the defaults metas for your application inside the nuxt.config.js, use the same field head:

module.exports = {
  head: {
    titleTemplate: '%s - Nuxt.js',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'Meta description' }
    ]
  }
}

Demo

npm install
npm start

Go to http://localhost:3000 and navigate trough the app. Notice how the page's title changes between the pages and is also server-side rendered.