mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-23 14:15:13 +00:00
107 lines
2.5 KiB
Markdown
107 lines
2.5 KiB
Markdown
|
# Meta Tags
|
||
|
|
|
||
|
|
Nuxt 3 provides several different ways to manage your meta tags.
|
||
|
|
|
||
|
|
1. Through your `nuxt.config`.
|
||
|
|
1. Through the `useMeta` [composable](/docs/usage/meta-tags#usemeta-composable)
|
||
|
|
1. Through [global meta components](/docs/usage/meta-tags#meta-components)
|
||
|
|
|
||
|
|
You can customize `title`, `base`, `script`, `style`, `meta`, `link`, `htmlAttrs` and `bodyAttrs`.
|
||
|
|
|
||
|
|
::alert{icon=📦}
|
||
|
|
Nuxt currently uses [`vueuse/head`](https://github.com/vueuse/head) to manage your meta tags, but implementation details may change.
|
||
|
|
::
|
||
|
|
|
||
|
|
[Read more about meta tags](/docs/usage/meta-tags).
|
||
|
|
|
||
|
|
## Migration
|
||
|
|
|
||
|
|
1. In your `nuxt.config`, rename `head` to `meta`. Consider moving this shared meta configuration into your `app.vue` instead. (Note that objects no longer have a `hid` key for deduplication.)
|
||
|
|
1. In your components, rename your `head` option to `meta`. If you need to access the component state, you should migrate to using `useMeta`. You might also consider using the built-in meta-components.
|
||
|
|
|
||
|
|
### Example: `useMeta`
|
||
|
|
|
||
|
|
::code-group
|
||
|
|
|
||
|
|
```vue [Nuxt 2]
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
data: () => ({
|
||
|
|
title: 'My App',
|
||
|
|
description: 'My App Description'
|
||
|
|
})
|
||
|
|
head () {
|
||
|
|
return {
|
||
|
|
title: this.title,
|
||
|
|
meta: [{
|
||
|
|
hid: 'description',
|
||
|
|
name: 'description',
|
||
|
|
content: this.description
|
||
|
|
}]
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
```
|
||
|
|
|
||
|
|
```vue [Nuxt 3]
|
||
|
|
<script setup>
|
||
|
|
const title = ref('My App')
|
||
|
|
const description = ref('My App Description')
|
||
|
|
|
||
|
|
// This will be reactive even you change title/description above
|
||
|
|
useMeta({
|
||
|
|
title,
|
||
|
|
meta: [{
|
||
|
|
name: 'description',
|
||
|
|
content: description
|
||
|
|
}]
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
```
|
||
|
|
|
||
|
|
::
|
||
|
|
|
||
|
|
### Example: built-in meta-components
|
||
|
|
|
||
|
|
Nuxt 3 also provides meta components that you can use to accomplish the same task. While these components look similar to HTML tags, they are provided by Nuxt and have similar functionality.
|
||
|
|
|
||
|
|
::code-group
|
||
|
|
|
||
|
|
```vue [Nuxt 2]
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
head () {
|
||
|
|
return {
|
||
|
|
title: 'My App',
|
||
|
|
meta: [{
|
||
|
|
hid: 'description',
|
||
|
|
name: 'description',
|
||
|
|
content: 'My App Description'
|
||
|
|
}]
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
```
|
||
|
|
|
||
|
|
```vue [Nuxt 3]
|
||
|
|
<template>
|
||
|
|
<div>
|
||
|
|
<Head>
|
||
|
|
<Title>My App</Title>
|
||
|
|
<Meta name="description" content="My app description"/>
|
||
|
|
</Head>
|
||
|
|
<!-- -->
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
```
|
||
|
|
|
||
|
|
::
|
||
|
|
|
||
|
|
::alert{icon=👉}
|
||
|
|
|
||
|
|
1. Make sure you use capital letters for these component names to distinguish them from native HTML elements (`<Title>` rather than `<title>`).
|
||
|
|
1. You can place these components anywhere in your template for your page.
|
||
|
|
::
|