mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-14 18:13:54 +00:00
94 lines
2.4 KiB
Markdown
94 lines
2.4 KiB
Markdown
# Head Management
|
|
|
|
You can customize the meta tags for your site through several different ways:
|
|
|
|
## `useHead` Composable
|
|
|
|
Within your `setup` function, you can call `useHead` with an object of meta properties with keys corresponding to meta tags: `title`, `base`, `script`, `style`, `meta` and `link`, as well as `htmlAttrs` and `bodyAttrs`. Alternatively, you can pass a function returning the object for reactive metadata.
|
|
|
|
For example:
|
|
|
|
```js
|
|
export default {
|
|
setup () {
|
|
useHead({
|
|
meta: [
|
|
{ name: 'viewport', content: 'width=device-width, initial-scale=1, maximum-scale=1' }
|
|
],
|
|
bodyAttrs: {
|
|
class: 'test'
|
|
}
|
|
})
|
|
}
|
|
}
|
|
```
|
|
|
|
::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, to include the page title alongside your app name, first define your page title:
|
|
|
|
```vue{}[pages/some-page.vue]
|
|
<script setup>
|
|
definePageMeta({
|
|
title: 'Some Page'
|
|
})
|
|
</script>
|
|
```
|
|
|
|
And then in your layout file:
|
|
|
|
```vue{}[layouts/default.vue]
|
|
<script setup>
|
|
const route = useRoute()
|
|
|
|
useHead({
|
|
title: computed(() => `App Name - ${route.meta.title}`)
|
|
})
|
|
</script>
|
|
```
|
|
|
|
:LinkExample{link="/examples/composables/use-head"}
|