Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2024-11-23 06:05:11 +00:00
Code Issues Packages Projects Releases Wiki Activity
e5e8985cd1
Nuxt/docs/content/3.docs/3.migration/4.meta.md
Daniel Roe 1a39eff502
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 19:32:30 +02:00

2.5 KiB
Raw Blame History

Meta Tags

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

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

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

::alert{icon=📦} Nuxt currently uses vueuse/head to manage your meta tags, but implementation details may change. ::

Read more about 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.)
  2. 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

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

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

::

::alert{icon=👉}

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