mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-11 16:43:55 +00:00
90784f79d7
* docs: implement new website theme * chore: rename dirs * chore: update build * lint fix * chore: update deps * fix: include node_modules in esbuild step * chore: update deps * Update .gitignore * chore: update theme version * up * up * fix: use svg for illustration * chore: update to 0.0.12 * chore: force parse5 resolution * stay with build * feat: always display first home section * Update yarn.lock * chore: update theme * fix lint * docs: update home title * chore: update website theme version * Update docs/content/0.index.md Co-authored-by: pooya parsa <pyapar@gmail.com> * Update docs/content/0.index.md Co-authored-by: pooya parsa <pyapar@gmail.com> * up * chore: bump theme version * up * chore: up * up up and up * chore: generate * fix: boolean value * feat: new images * update again * chore: up * ouep * chore: up Co-authored-by: Daniel Roe <daniel@roe.dev> Co-authored-by: Clément Ollivier <clement.o2p@gmail.com> Co-authored-by: pooya parsa <pyapar@gmail.com>
2.4 KiB
2.4 KiB
Meta Tags
Nuxt 3 provides several different ways to manage your meta tags.
- Through your
nuxt.config. - Through the
useHeadcomposable - Through global meta components
You can customize title, titleTemplate, base, script, noscript, style, meta, link, htmlAttrs and bodyAttrs.
::alert{icon=📦}
Nuxt currently uses vueuse/head to manage your meta tags, but implementation details may change.
::
Migration
- In your
nuxt.config, renameheadtometa. Consider moving this shared meta configuration into yourapp.vueinstead. (Note that objects no longer have ahidkey for deduplication.) - If you need to access the component state with
head, you should migrate to usinguseHead. You might also consider using the built-in meta-components.
Example: 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>
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
<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=👉}
- Make sure you use capital letters for these component names to distinguish them from native HTML elements (
<Title>rather than<title>). - You can place these components anywhere in your template for your page. ::