will use site data such as title and description and combine them
with page titles—specified in frontmatter—to set reasonable default values
for commonly used meta tags.
There are several ways to customize title and meta tags in , powered by @vueuse/head.
useHead ComposableThis helper can be used in the setup function or <script setup> of any Vue component.
<script setup lang="ts">
import { computed } from 'vue'
const { frontmatter } = usePage()
useHead({
meta: [
{ property: 'og:type', content: 'website' },
{ property: 'keywords', content: computed(() => frontmatter.tags) },
],
})
</script>Notice that values can be static or computed.
Composables are auto-importedYou don't need to import usePage, useRoute, useHead, or definePageComponent.
<Head> ComponentBesides useHead, you can also manipulate head tags using the <Head> component:
<template>
<Head>
<title>Hello World</title>
<meta property="author" :content="$site.author">
<meta property="keywords" :content="$frontmatter.tags">
<html lang="en-US" class="theme-dark" />
</Head>
</template>This is often more intuitive, specially for dynamic values.
Finally, you can use head in src/app.ts, which supports the
same format as useHead.
import { defineApp } from 'iles'
export default defineApp({
head: {
htmlAttrs: { lang: 'en-US' },
},
})If you need access to the site or page, you can provide a function instead:
import { defineApp } from 'iles'
export default defineApp({
head ({ frontmatter, site }) {
return {
meta: [
{ property: 'author', content: site.author },
{ property: 'keywords', content: computed(() => frontmatter.tags) },
]
}
},
})