2.4 KiB
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:
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:
<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:
<script setup>
definePageMeta({
title: 'Some Page'
})
</script>
And then in your layout file:
<script setup>
const route = useRoute()
useHead({
title: computed(() => `App Name - ${route.meta.title}`)
})
</script>