Nuxt/docs/content/3.docs/3.migration/4.meta.md

# Meta Tags

Nuxt 3 provides several different ways to manage your meta tags.

1. Through your `nuxt.config`.
1. Through the `useHead` [composable](/docs/usage/meta-tags#usehead-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. If you need to access the component state with `head`, you should migrate to using `useHead`. You might also consider using the built-in meta-components.

### Example: `useHead`

::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
useHead({
  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.
::
docs: update migration guide for nuxt 3 (#3819) Co-authored-by: Dan Pastori <dan@521dimensions.com> Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com> Co-authored-by: pooya parsa <pyapar@gmail.com> 2022-03-30 17:32:30 +00:00			`# Meta Tags`

			`Nuxt 3 provides several different ways to manage your meta tags.`

			1. Through your `nuxt.config`.
refactor(nuxt3,bridge)!: rename `useMeta` to `useHead` (#4066) 2022-04-05 14:02:29 +00:00			1. Through the `useHead` [composable](/docs/usage/meta-tags#usehead-composable)
docs: update migration guide for nuxt 3 (#3819) Co-authored-by: Dan Pastori <dan@521dimensions.com> Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com> Co-authored-by: pooya parsa <pyapar@gmail.com> 2022-03-30 17:32:30 +00:00			`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.)
refactor(nuxt3,bridge)!: rename `useMeta` to `useHead` (#4066) 2022-04-05 14:02:29 +00:00			1. If you need to access the component state with `head`, you should migrate to using `useHead`. You might also consider using the built-in meta-components.
docs: update migration guide for nuxt 3 (#3819) Co-authored-by: Dan Pastori <dan@521dimensions.com> Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com> Co-authored-by: pooya parsa <pyapar@gmail.com> 2022-03-30 17:32:30 +00:00
refactor(nuxt3,bridge)!: rename `useMeta` to `useHead` (#4066) 2022-04-05 14:02:29 +00:00			### Example: `useHead`
docs: update migration guide for nuxt 3 (#3819) Co-authored-by: Dan Pastori <dan@521dimensions.com> Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com> Co-authored-by: pooya parsa <pyapar@gmail.com> 2022-03-30 17:32:30 +00:00
			`::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`
refactor(nuxt3,bridge)!: rename `useMeta` to `useHead` (#4066) 2022-04-05 14:02:29 +00:00			`useHead({`
docs: update migration guide for nuxt 3 (#3819) Co-authored-by: Dan Pastori <dan@521dimensions.com> Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com> Co-authored-by: pooya parsa <pyapar@gmail.com> 2022-03-30 17:32:30 +00:00			`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.`
			`::`