Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2024-11-16 02:44:51 +00:00
Code Issues Packages Projects Releases Wiki Activity
0ecb42b81d
Nuxt/docs/7.migration/4.meta.md
Florent Delerue 7213b2ddac
docs: replace callout to new components (#25897)
2024-02-21 18:09:45 +01:00

3.0 KiB
Raw Blame History

title description
Meta Tags Manage your meta tags, from Nuxt 2 to Nuxt 3.

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

  1. Through your nuxt.config.
  2. Through the useHead composable
  3. Through global meta components

You can customize title, titleTemplate, base, script, noscript, style, meta, link, htmlAttrs and bodyAttrs.

::tip Nuxt currently uses vueuse/head to manage your meta tags, but implementation details may change. ::

:read-more{to="/docs/getting-started/seo-meta"}

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.)
  2. 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.
  3. If you need to use the Options API, there is a head() method you can use when you use defineNuxtComponent.

useHead

::code-group

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

<script setup lang="ts">
const title = ref('My App')
const description = ref('My App Description')

// This will be reactive when you change title/description above
useHead({
  title,
  meta: [{
    name: 'description',
    content: description
  }]
})
</script>

::

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

<script>
export default {
  head () {
    return {
      title: 'My App',
      meta: [{
        hid: 'description',
        name: 'description',
        content: 'My App Description'
      }]
    }
  }
}
</script>

<template>
  <div>
    <Head>
      <Title>My App</Title>
      <Meta name="description" content="My app description"/>
    </Head>
    <!-- -->
  </div>
</template>

::

::important

  1. Make sure you use capital letters for these component names to distinguish them from native HTML elements (<Title> rather than <title>).
  2. You can place these components anywhere in your template for your page. ::

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>