2023-10-18 10:59:43 +00:00
---
title: Meta Tags
description: 'Learn how to migrate from Nuxt 2 to Nuxt Bridge new meta tags.'
---
2023-08-29 09:55:59 +00:00
If you need to access the component state with `head` , you should migrate to using [`useHead` ](/docs/api/composables/use-head ) .
If you need to use the Options API, there is a `head()` method you can use when you use `defineNuxtComponent` .
## Migration
### Set `bridge.meta`
```js
import { defineNuxtConfig } from '@nuxt/bridge'
export default defineNuxtConfig({
bridge: {
2023-10-02 16:02:49 +00:00
meta: true,
nitro: false // If migration to Nitro is complete, set to true
2023-08-29 09:55:59 +00:00
}
})
```
### Update head properties
In your `nuxt.config` , rename `head` to `meta` . (Note that objects no longer have a `hid` key for deduplication.)
::code-group
```ts [Nuxt 2]
export default {
head: {
titleTemplate: '%s - Nuxt',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: 'Meta description' }
]
}
}
```
```ts [Nuxt 3]
export default defineNuxtConfig({
app: {
head: {
titleTemplate: '%s - Nuxt',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ name: 'description', content: 'Meta description' }
]
}
}
})
```
::
## `useHead` Composables
Nuxt Bridge provides a new Nuxt 3 meta API that can be accessed with a new [`useHead` ](/docs/api/composables/use-head ) composable.
```vue
< script setup lang = "ts" >
useHead({
title: 'My Nuxt App',
})
< / script >
```
2024-02-21 17:09:45 +00:00
::tip
2023-08-29 09:55:59 +00:00
This [`useHead` ](/docs/api/composables/use-head ) composable uses `@unhead/vue` under the hood (rather than `vue-meta` ) to manipulate your `<head>` .
::
2024-02-21 17:09:45 +00:00
::warning
2023-08-29 09:55:59 +00:00
We recommend not using the native Nuxt 2 `head()` properties in addition to [`useHead` ](/docs/api/composables/use-head ) , as they may conflict.
::
For more information on how to use this composable, see [the docs ](/docs/getting-started/seo-meta ).
## Options API
```vue
< script >
// if using options API `head` method you must use `defineNuxtComponent`
export default defineNuxtComponent({
head (nuxtApp) {
// `head` receives the nuxt app but cannot access the component instance
return {
meta: [{
name: 'description',
content: 'This is my page description.'
}]
}
}
})
< / script >
```
2024-06-13 08:44:30 +00:00
::warning
Possible breaking change: `head` receives the nuxt app but cannot access the component instance. If the code in your `head` tries to access the data object through `this` or `this.$data` , you will need to migrate to the `useHead` composable.
::
2023-08-29 09:55:59 +00:00
## Title Template
If you want to use a function (for full control), then this cannot be set in your nuxt.config, and it is recommended instead to set it within your `/layouts` directory.
```vue [layouts/default.vue]
< script setup lang = "ts" >
useHead({
titleTemplate: (titleChunk) => {
return titleChunk ? `${titleChunk} - Site Title` : 'Site Title';
}
})
< / script >
```
