Introduction
Kimesh is a Vue.js framework that provides type-safe file-based routing, a layer system for modular architectures, and integrated data loading with TanStack Query.
What is Kimesh?
Kimesh builds on top of Vue 3, Vue Router, and Vite to deliver a batteries-included development experience:
- File-Based Routing — Define routes by creating
.vuefiles in aroutes/directory. TanStack Router-style conventions with dynamic params, catch-all routes, and pathless layouts. - Type-Safe Navigation — Auto-generated route types provide autocomplete for route names, params, and search queries.
- Layer System — Compose applications from reusable, self-contained layers that share routes, components, and composables.
- Data Loading — Built-in
createFileRouteloaders with TanStack Query integration for caching and stale-while-revalidate. - Auto-Imports — Vue, Vue Router, and Kimesh APIs are auto-imported. Your composables and utilities from
composables/andutils/directories are also auto-imported. - Head Management — Manage
<head>tags reactively withuseHead(),useSeoMeta(), and declarative head components. - Module System — Extend Kimesh with modules for TailwindCSS, shadcn/ui, Pinia, and more.
- CLI Tooling —
km dev,km build,km prepare, and layer management commands.
Architecture
Kimesh is composed of several packages:
| Package | Description |
|---|---|
kimesh | Main umbrella package (re-exports all sub-packages) |
@kimesh/kit | Build-time engine: config loading, module system, Vite plugin |
@kimesh/cli | CLI commands (dev, build, prepare, init, layer) |
@kimesh/router-generator | File-based route generation from directory structure |
@kimesh/router-runtime | Runtime router: composables, components, middleware, plugins |
@kimesh/query | Data fetching: $fetch, loaders, TanStack Query integration |
@kimesh/head | Head meta management: useHead, useSeoMeta, head components |
@kimesh/auto-import | OXC-powered auto-import system with layer support |
@kimesh/layers | Layer discovery, resolution, and configuration merging |
create-kimesh | Project scaffolding tool |
Quick Example
src/routes/
├── __root.vue # Root layout
├── index.vue # / (home page)
├── about.vue # /about
├── posts/
│ ├── index.vue # /posts
│ └── $id.vue # /posts/:id (dynamic)
└── $.vue # Catch-all routeEach file automatically becomes a route. No manual route configuration needed.
Next Steps
- Installation — Create a new project or add Kimesh to an existing one
- Configuration — Learn about
kimesh.config.ts - Routing — Understand file-based routing basics