mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-14 18:13:54 +00:00
97 lines
2.9 KiB
Markdown
97 lines
2.9 KiB
Markdown
# Head Management
|
|
|
|
Out-of-the-box, Nuxt provides good default values for `charset` and `viewport` meta tags, but you can override these if you need to, as well as customizing other meta tags for your site in several different ways.
|
|
|
|
:ReadMore{link="/api/configuration/nuxt.config#head"}
|
|
|
|
## `useHead` Composable
|
|
|
|
Within your `setup` function, you can call `useHead` with an object of meta properties with keys corresponding to meta tags: `title`, `titleTemplate`, `base`, `script`, `style`, `meta` and `link`, as well as `htmlAttrs` and `bodyAttrs`. There are also two shorthand properties, `charset` and `viewport`, which set the corresponding meta tags. Alternatively, you can pass a function returning the object for reactive metadata.
|
|
|
|
For example:
|
|
|
|
```vue
|
|
<script setup>
|
|
useHead({
|
|
titleTemplate: 'My App - %s', // or, title => `My App - ${title}`
|
|
viewport: 'width=device-width, initial-scale=1, maximum-scale=1',
|
|
charset: 'utf-8',
|
|
meta: [
|
|
{ name: 'description', content: 'My amazing site.' }
|
|
],
|
|
bodyAttrs: {
|
|
class: 'test'
|
|
}
|
|
})
|
|
</script>
|
|
```
|
|
|
|
::ReadMore{link="/api/composables/use-head"}
|
|
::
|
|
|
|
## Meta Components
|
|
|
|
Nuxt provides `<Title>`, `<Base>`, `<Script>`, `<Style>`, `<Meta>`, `<Link>`, `<Body>`, `<Html>` and `<Head>` components so that you can interact directly with your metadata within your component's template.
|
|
|
|
Because these component names match native HTML elements, it is very important that they are capitalized in the template.
|
|
|
|
`<Head>` and `<Body>` can accept nested meta tags (for aesthetic reasons) but this has no effect on _where_ the nested meta tags are rendered in the final HTML.
|
|
|
|
For example:
|
|
|
|
<!-- @case-police-ignore html -->
|
|
|
|
```html{}[app.vue]
|
|
<template>
|
|
<div>
|
|
Hello World
|
|
<Html :lang="dynamic > 50 ? 'en-GB' : 'en-US'">
|
|
<Head>
|
|
<Title>{{ dynamic }} title</Title>
|
|
<Meta name="description" :content="`My page's ${dynamic} description`" />
|
|
<Link rel="preload" href="/test.txt" as="script" />
|
|
<Style type="text/css" :children="styleString" />
|
|
</Head>
|
|
</Html>
|
|
|
|
<button class="blue" @click="dynamic = Math.random() * 100">
|
|
Click me
|
|
</button>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data: () => ({ dynamic: 49, styleString: 'body { background-color: green; }' })
|
|
}
|
|
</script>
|
|
```
|
|
|
|
## Example: usage with definePageMeta
|
|
|
|
You can use `definePageMeta` along with `useHead` to set metadata based on the current route.
|
|
|
|
For example, you can first set the current page title (this is extracted at build time via a macro, so it can't be set dynamically):
|
|
|
|
```vue{}[pages/some-page.vue]
|
|
<script setup>
|
|
definePageMeta({
|
|
title: 'Some Page'
|
|
})
|
|
</script>
|
|
```
|
|
|
|
And then in your layout file you might use the route metadata you've previously set:
|
|
|
|
```vue{}[layouts/default.vue]
|
|
<script setup>
|
|
const route = useRoute()
|
|
|
|
useHead({
|
|
meta: [{ name: 'og:title', content: `App Name - ${route.meta.title}` }]
|
|
})
|
|
</script>
|
|
```
|
|
|
|
:LinkExample{link="/examples/composables/use-head"}
|