Components
Kimesh provides built-in components for routing and head management. All components are auto-imported.
Routing Components
<KmOutlet>
Renders matched child routes within a layout. Equivalent to Vue Router's <RouterView> but integrated with Kimesh's loader system.
<template>
<div class="layout">
<Sidebar />
<main>
<KmOutlet />
</main>
</div>
</template>Source: @kimesh/router-runtime
<KmLink>
Type-safe navigation link component. Renders an <a> tag with SPA navigation behavior.
<template>
<!-- Basic -->
<KmLink to="/about">About</KmLink>
<!-- Named route with params -->
<KmLink :to="{ name: 'posts-id', params: { id: '123' } }">
Post 123
</KmLink>
<!-- External link (regular <a> tag) -->
<KmLink to="https://example.com" external>External</KmLink>
</template>Props
| Prop | Type | Default | Description |
|---|---|---|---|
to | string | RouteLocationRaw | Required | Target route |
external | boolean | false | Open as external link |
replace | boolean | false | Use router.replace instead of router.push |
activeClass | string | 'router-link-active' | Class when route is active |
exactActiveClass | string | 'router-link-exact-active' | Class when route is exactly active |
prefetch | boolean | true | Prefetch target route data on hover |
Type: KmLinkProps
Source: @kimesh/router-runtime
<KmDeferred>
Wraps Vue's <Suspense> with integrated error handling. Use with useSuspenseQuery for progressive data loading.
<template>
<KmDeferred :timeout="200">
<!-- Default slot: async component -->
<UserActivity :user-id="userId" />
<!-- Fallback: loading state -->
<template #fallback>
<ActivitySkeleton />
</template>
<!-- Error: error state -->
<template #error="{ error, retry }">
<p>{{ error.message }}</p>
<button @click="retry">Retry</button>
</template>
</KmDeferred>
</template>Props
| Prop | Type | Default | Description |
|---|---|---|---|
timeout | number | 0 | Delay (ms) before showing fallback |
Slots
| Slot | Props | Description |
|---|---|---|
default | — | Async component using await useSuspenseQuery() |
fallback | — | Loading/skeleton UI |
error | { error: Error, retry: () => void } | Error state with retry |
Source: @kimesh/router-runtime
Head Components
All head components are auto-imported from @kimesh/head. They manage <head> tags declaratively in your templates.
<KmHead>
Container for head elements:
<template>
<KmHead>
<title>My Page</title>
<meta name="description" content="..." />
</KmHead>
</template><KmTitle>
Set the page title:
<KmTitle>My Page Title</KmTitle><KmMeta>
Add a meta tag:
<KmMeta name="description" content="Page description" />
<KmMeta property="og:title" content="My Page" /><KmLink> (head)
Add a link tag to <head> (different from routing KmLink):
<KmLink rel="canonical" href="https://example.com/page" />
<KmLink rel="stylesheet" href="/css/custom.css" />Note: The head
KmLinkcomponent is used inside<KmHead>. Outside of<KmHead>,KmLinkrefers to the routing link component.
<KmScript>
Add a script tag:
<KmScript src="https://analytics.example.com/script.js" async /><KmStyle>
Add an inline style block:
<KmStyle>
body { background: #f0f0f0; }
</KmStyle><KmHtml>
Set attributes on the <html> element:
<KmHtml lang="en" dir="ltr" /><KmBody>
Set attributes on the <body> element:
<KmBody class="antialiased dark:bg-gray-900" />Source: @kimesh/head