mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-23 22:25:12 +00:00
86 lines
2.2 KiB
Markdown
86 lines
2.2 KiB
Markdown
|
# Updating headers with Nuxt.js
|
||
|
|
|
||
|
|
Nuxt.js uses [`vue-meta`](https://github.com/declandewet/vue-meta) to update the `headers` and `html attributes` of your applications.
|
||
|
|
|
||
|
|
Nuxt.js configures `vue-meta` with these options:
|
||
|
|
```js
|
||
|
|
{
|
||
|
|
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`
|
||
|
|
```html
|
||
|
|
<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](https://github.com/declandewet/vue-meta#recognized-metainfo-properties).
|
||
|
|
|
||
|
|
## 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:
|
||
|
|
```html
|
||
|
|
<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`:
|
||
|
|
```js
|
||
|
|
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
|
||
|
|
|
||
|
|
```bash
|
||
|
|
npm install
|
||
|
|
npm start
|
||
|
|
```
|
||
|
|
|
||
|
|
Go to [http://localhost:3000](http://localhost:3000) and navigate trough the app. Notice how the page's title changes between the pages and is also server-side rendered.
|