Routing

Kimesh uses file-based routing — every .vue file in your src/routes/ directory automatically becomes a route. No manual route configuration needed.

Basic Routes

File	Route Path
index.vue	/
about.vue	/about
blog/index.vue	/blog
blog/post.vue	/blog/post

Dynamic Routes

Use the $param prefix for dynamic segments:

routes/
├── users/
│   └── $id.vue       # /users/:id
└── posts/
    └── $slug.vue     # /posts/:slug

Access params in your component:

<script setup lang="ts">
// useParams is auto-imported
const params = useParams()
console.log(params.id) // "123" for /users/123
</script>

Layouts

When a file has a matching directory, it becomes a layout that wraps child routes:

routes/
├── posts.vue         # Layout for /posts/*
└── posts/
    ├── index.vue     # /posts
    └── $id.vue       # /posts/:id

<!-- posts.vue (layout) -->
<template>
  <div class="posts-layout">
    <PostsSidebar />
    <KmOutlet />  <!-- Child routes render here -->
  </div>
</template>

Root Layout

__root.vue is the root layout that wraps all routes:

<!-- src/routes/__root.vue -->
<template>
  <div id="app">
    <AppHeader />
    <main>
      <RouterView />
    </main>
    <AppFooter />
  </div>
</template>

Pathless Layouts

Use _name.vue prefix for layouts that don't add a URL segment:

routes/
├── _auth.vue         # Pathless layout (no URL segment)
├── _auth/
│   ├── login.vue     # /login (not /auth/login)
│   └── register.vue  # /register

Catch-All Routes

Use $.vue to match any remaining path:

routes/
├── docs/
│   └── $.vue         # /docs/* (any path under /docs)
└── $.vue             # /* (global 404)

Group Folders

Use parentheses for organization without affecting the URL:

routes/
├── (marketing)/
│   ├── pricing.vue   # /pricing
│   └── features.vue  # /features
├── (app)/
│   ├── dashboard.vue # /dashboard
│   └── settings.vue  # /settings

Navigation

Use KmLink for declarative navigation:

<template>
  <KmLink to="/about">About</KmLink>
  <KmLink :to="{ name: 'posts-id', params: { id: '123' } }">Post 123</KmLink>
</template>

Or use useNavigate for programmatic navigation:

<script setup>
const navigate = useNavigate()

function goToPost(id: string) {
  navigate({ name: 'posts-id', params: { id } })
}
</script>

Ignored Files

Files starting with - (or your configured ignorePrefix) are excluded from routing:

routes/
├── posts/
│   ├── index.vue         # Route: /posts
│   ├── -utils.ts         # Ignored (helper file)
│   └── -posts.data.ts    # Ignored (query definitions)

Next Steps

• File Naming Conventions — Full reference for all naming patterns
• Data Loading — Load data before routes render
• Middleware — Route guards and navigation control