Migrate to Nuxt Bridge: Meta Tags

If you need to access the component state with head, you should migrate to using useHead .

If you need to use the Options API, there is a head() method you can use when you use defineNuxtComponent.

Migration

Set `bridge.meta`

import { defineNuxtConfig } from '@nuxt/bridge'export default defineNuxtConfig({  bridge: {    meta: true,    nitro: false // If migration to Nitro is complete, set to true  }})

Update head properties

In your nuxt.config, rename head to meta. (Note that objects no longer have a hid key for deduplication.)

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' }    ]  }}

`useHead` Composables

Nuxt Bridge provides a new Nuxt 3 meta API that can be accessed with a new useHead composable.

<script setup lang="ts">useHead({  title: 'My Nuxt App',})</script>

This useHead composable uses @unhead/vue under the hood (rather than vue-meta) to manipulate your <head>.

We recommend not using the native Nuxt 2 head() properties in addition to useHead , as they may conflict.

For more information on how to use this composable, see the docs.

Options API

<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>

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.

layouts/default.vue

<script setup lang="ts">useHead({  titleTemplate: (titleChunk) => {    return titleChunk ? `${titleChunk} - Site Title` : 'Site Title';  }})</script>

New Composition API

Nuxt Bridge implements composables compatible with Nuxt 3.

Runtime Config

Nuxt provides a runtime config API to expose configuration and secrets within your application.

Meta Tags