Head Management
Kimesh provides reactive <head> management through @kimesh/head. Manage page titles, meta tags, scripts, and more — both globally and per-route.
Global Head
Set default head tags in kimesh.config.ts:
ts
export default defineKmConfig({
app: {
head: {
title: 'My App',
titleTemplate: '%s | My App',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
],
htmlAttrs: { lang: 'en' },
},
},
})useHead
Set head tags reactively in any component:
vue
<script setup>
// Auto-imported
useHead({
title: 'About Us',
meta: [
{ name: 'description', content: 'Learn about our company' },
],
})
</script>With reactive data:
vue
<script setup>
const title = ref('Loading...')
useHead({
title, // Updates <title> when ref changes
})
onMounted(async () => {
const data = await fetchPage()
title.value = data.title
})
</script>useSeoMeta
A flat API for setting common SEO meta tags:
vue
<script setup>
useSeoMeta({
title: 'My Page',
ogTitle: 'My Page',
description: 'A description of my page',
ogDescription: 'A description of my page',
ogImage: 'https://example.com/image.png',
twitterCard: 'summary_large_image',
})
</script>Route-Level Head
Define head tags in route definitions using createFileRoute:
vue
<script lang="ts">
export const Route = createFileRoute('/posts/:id')({
// Static head
head: {
title: 'Blog Post',
},
// Or dynamic head based on loader data
head: ({ loaderData }) => ({
title: loaderData.post.title,
meta: [
{ name: 'description', content: loaderData.post.excerpt },
],
}),
})
</script>Head Components
Declarative head management in templates:
vue
<template>
<div>
<KmTitle>My Page Title</KmTitle>
<KmMeta name="description" content="Page description" />
<KmLink rel="canonical" href="https://example.com/page" />
<KmScript src="https://analytics.example.com/script.js" async />
<h1>Page Content</h1>
</div>
</template>Available components: KmHead, KmTitle, KmMeta, KmLink, KmScript, KmStyle, KmHtml, KmBody.
useRouteHead
Access the computed head configuration for the current route:
vue
<script setup>
const head = useRouteHead()
console.log(head.value.title)
</script>Next Steps
- Layers — Build modular applications
- Head Components API — Full component reference