Skip to content

Kimesh Configuration

Discover all the options you can use in your kimesh.config.ts file.

Overview

Kimesh uses a configuration file called kimesh.config.ts at the root of your project. This file is loaded using c12 and provides type-safe configuration with full TypeScript support.

ts
// kimesh.config.ts
import { defineKmConfig } from '@kimesh/kit'

export default defineKmConfig({
  name: 'my-app',
  // ... configuration options
})

name

The name of your application or layer. Used for identification and logging purposes.

  • Type: string
  • Default: "kimesh-app"
ts
export default defineKmConfig({
  name: 'my-awesome-app',
})

alias

Define additional aliases to access custom directories within your JavaScript and CSS.

  • Type: Record<string, string>
  • Default:
json
{
  "~": "<srcDir>",
  "@": "<srcDir>",
  "~~": "<rootDir>",
  "@@": "<rootDir>",
  "#build": "<rootDir>/.kimesh",
  "#app": "<rootDir>/.kimesh/app"
}

Note: These aliases will be automatically added to the generated TypeScript configuration (.kimesh/tsconfig.json) so you can get full type support and path auto-complete. Your project's tsconfig.json should extend from this generated configuration.

Example:

ts
import { fileURLToPath } from 'node:url'

export default defineKmConfig({
  alias: {
    images: fileURLToPath(new URL('./assets/images', import.meta.url)),
    style: fileURLToPath(new URL('./assets/style', import.meta.url)),
    data: fileURLToPath(new URL('./assets/data', import.meta.url)),
  },
})

tsconfig.json setup:

Your project's tsconfig.json should extend the auto-generated configuration:

json
{
  "extends": "./.kimesh/tsconfig.json",
  "compilerOptions": {
    // You can override compiler options here
  },
  "include": ["src/**/*", ".kimesh/**/*", "kimesh.config.ts"],
  "exclude": ["node_modules"]
}

This ensures all aliases (default + custom + layer + module aliases) are automatically available in TypeScript without manual configuration.

Usage in code:

vue
<template>
  <img src="images/logo.png" />
</template>

<script setup>
// Use ~ or @ for srcDir imports
import { useUser } from '~/composables/useUser'
import data from 'data/config.json'
</script>

<style>
@import 'style/variables.css';
</style>

debug

Set to true to enable debug mode, which prints out hook names and timings, logs hook arguments, and provides detailed information about module loading and layer resolution.

  • Type: boolean | DebugConfig
  • Default: false

DebugConfig

ts
interface DebugConfig {
  hooks?: boolean // Log hook execution with timing
  modules?: boolean // Log module loading and setup
  layers?: boolean // Log layer resolution
  config?: boolean // Log configuration loading
  vite?: boolean // Log Vite plugin operations
  routes?: boolean // Log route generation
  imports?: boolean // Log auto-import resolution
}

Example:

ts
export default defineKmConfig({
  // Enable all debug options
  debug: true,

  // Or enable specific options
  debug: {
    hooks: true,
    modules: true,
    layers: true,
  },
})

hooks

Hooks are listeners to Kimesh events that are typically used in modules, but are also available in kimesh.config.ts.

Internally, hooks follow a naming pattern using colons (e.g., build:done).

  • Type: Partial<KimeshHooks>

Example:

ts
export default defineKmConfig({
  hooks: {
    ready: (kimesh) => {
      console.log('Kimesh is ready!')
    },
    'build:done': (kimesh) => {
      console.log('Build completed!')
    },
    'vite:configResolved': (config, kimesh) => {
      console.log('Vite config resolved')
    },
  },
})

Available Hooks:

HookDescription
config:loadedCalled after config is loaded
layers:resolvedCalled after layers are resolved
readyCalled when Kimesh is fully initialized
modules:beforeCalled before modules are processed
modules:doneCalled after all modules are processed
build:beforeCalled before build starts
build:doneCalled after build completes
vite:extendCalled to extend Vite config
vite:configResolvedCalled after Vite config is resolved
routes:extendCalled after routes are generated
templates:extendCalled when templates need generation
closeCalled when Kimesh is closing

ignore

Files matching glob patterns specified inside the ignore array will be ignored during building.

  • Type: string[]
  • Default:
json
[
  "**/*.stories.{js,cts,mts,ts,jsx,tsx}",
  "**/*.{spec,test}.{js,cts,mts,ts,jsx,tsx}",
  "**/*.d.{cts,mts,ts}",
  "**/.{git,cache,data,output}",
  "**/*.sock",
  ".kimesh",
  "**/node_modules",
  "**/-*.*"
]

Example:

ts
export default defineKmConfig({
  ignore: ['**/__tests__/**', '**/*.mock.ts', 'legacy/**', '**/internal/**'],
})

ignorePrefix

Any file in routes, layouts, middleware directories will be ignored during the build process if its filename starts with the prefix specified.

  • Type: string
  • Default: "-"

Example:

ts
export default defineKmConfig({
  ignorePrefix: '_', // Ignore files starting with underscore
})

With this configuration:

  • _utils.ts will be ignored
  • -helpers.ts will NOT be ignored (default prefix changed)

ignoreOptions

Pass options directly to node-ignore (which is used by Kimesh to ignore files).

  • Type: IgnoreOptions
ts
interface IgnoreOptions {
  ignorecase?: boolean // Whether matching is case-insensitive (default: false)
}

Example:

ts
export default defineKmConfig({
  ignoreOptions: {
    ignorecase: false, // Case-sensitive matching
  },
})

See: node-ignore


routeRules

Global route rules applied to matching routes. Keys are route patterns that support wildcards.

Experimental: This feature's API may change in the future.

  • Type: Record<string, RouteRule>

RouteRule

ts
interface RouteRule {
  redirect?: string | { to: string; statusCode?: 301 | 302 | 307 | 308 }
  prerender?: boolean
  cache?: boolean | { maxAge?: number; swr?: number; varies?: string[] }
  headers?: Record<string, string>
  cors?: boolean | { origin?: string | string[]; methods?: string[]; headers?: string[]; credentials?: boolean }
  meta?: Record<string, unknown>
}

Pattern Matching

  • Exact match: /about - matches only /about
  • Double wildcard: /admin/** - matches /admin, /admin/users, /admin/users/123
  • Single wildcard: /users/* - matches /users/123 but not /users/123/posts

Example:

ts
export default defineKmConfig({
  routeRules: {
    // Redirect admin routes to login
    '/admin/**': {
      redirect: '/login',
    },

    // Add CORS and cache headers for API routes
    '/api/**': {
      headers: { 'Cache-Control': 'no-store' },
      cors: true,
    },

    // Prerender static pages
    '/blog/**': {
      prerender: true,
    },

    // Custom redirect with status code
    '/old-page': {
      redirect: { to: '/new-page', statusCode: 301 },
    },

    // Add custom metadata
    '/dashboard/**': {
      meta: { requiresAuth: true },
    },
  },
})

srcDir

Source directory for your application code. All relative paths are resolved from this directory.

  • Type: string
  • Default: "src"

Example:

ts
export default defineKmConfig({
  srcDir: 'app', // Use 'app' instead of 'src'
})

buildDir

Build output directory for Kimesh's generated files. Contains TypeScript configs, generated routes, and other build artifacts.

  • Type: string
  • Default: ".kimesh"

Example:

ts
export default defineKmConfig({
  buildDir: '.output', // Use '.output' instead of '.kimesh'
})

dir

Directory configuration for customizing the project structure.

dir.assets

Directory for static assets, relative to srcDir.

  • Type: string
  • Default: "assets"

dir.plugins

Directory for runtime plugins, relative to srcDir.

  • Type: string
  • Default: "plugins"

dir.public

Directory for public static files, relative to rootDir.

  • Type: string
  • Default: "public"

dir.shared

Directory for shared code across the app, relative to srcDir.

  • Type: string
  • Default: "shared"

Example:

ts
export default defineKmConfig({
  dir: {
    assets: 'static/assets',
    plugins: 'lib/plugins',
    public: 'static',
    shared: 'lib/shared',
  },
})

build

Build configuration for production builds.

build.analyze

Enable bundle analysis to visualize bundle contents.

  • Type: boolean | AnalyzeConfig
  • Default: false
ts
interface AnalyzeConfig {
  enabled?: boolean // Enable the analyzer
  openAnalyzer?: boolean // Auto-open report in browser
  reportFilename?: string // Custom report filename
}

build.sourcemap

Generate source maps for production builds.

  • Type: boolean | "hidden" | "inline"
  • Default: false

Options:

  • true: Generate separate source map files
  • "hidden": Generate maps but don't reference them in bundles
  • "inline": Inline source maps into bundles
  • false: No source maps

build.target

Build target for esbuild/terser. Specifies the JS language version.

  • Type: string
  • Default: "esnext"

build.minify

Minification strategy for production builds.

  • Type: boolean | "esbuild" | "terser"
  • Default: "esbuild"

Example:

ts
export default defineKmConfig({
  build: {
    analyze: true,
    sourcemap: 'hidden',
    target: 'es2022',
    minify: 'esbuild',
  },
})

dev

Enhanced development server configuration.

dev.port

The port on which the development server will listen.

  • Type: number
  • Default: 3000

dev.host

The host on which the development server will listen. Set to true or '0.0.0.0' to expose on all network interfaces.

  • Type: string | boolean
  • Default: "localhost"

dev.open

Whether to automatically open the browser when the dev server starts.

  • Type: boolean
  • Default: false

dev.https

Enable HTTPS for the dev server. Set to true for auto-generated certificates, or provide custom key/cert paths.

  • Type: boolean | HttpsConfig
  • Default: false
ts
interface HttpsConfig {
  key?: string // Path to SSL key file
  cert?: string // Path to SSL certificate file
}

dev.proxy

Configure proxy rules for the dev server. Useful for API proxying during development.

  • Type: Record<string, string | ProxyOptions>
ts
interface ProxyOptions {
  target: string // Target URL to proxy to
  changeOrigin?: boolean // Change origin header (default: true)
  rewrite?: (path: string) => string // URL path rewrite
  ws?: boolean // Proxy WebSocket connections
  secure?: boolean // SSL verification
  headers?: Record<string, string> // Custom headers
}

dev.cors

Configure CORS for the dev server.

  • Type: boolean | CorsOptions
  • Default: false
ts
interface CorsOptions {
  origin?: string | string[] | boolean
  methods?: string[]
  allowedHeaders?: string[]
  exposedHeaders?: string[]
  credentials?: boolean
  maxAge?: number
}

dev.strictPort

Exit if the specified port is already in use.

  • Type: boolean
  • Default: false

Example:

ts
export default defineKmConfig({
  dev: {
    port: 3000,
    host: 'localhost',
    open: true,
    https: true,
    proxy: {
      '/api': 'http://localhost:8080',
      '/socket': {
        target: 'ws://localhost:8081',
        ws: true,
      },
    },
    cors: true,
    strictPort: false,
  },
})

typescript

TypeScript configuration options.

typescript.strict

Enable strict TypeScript mode. Adds strict compiler options to generated tsconfig.

  • Type: boolean
  • Default: true

typescript.typeCheck

Enable type checking during development and/or build.

  • Type: boolean | "build"
  • Default: false

Options:

  • true: Type check during both dev and build
  • "build": Only type check during build
  • false: Disable type checking

typescript.tsConfig

Additional tsconfig options to merge with generated config.

  • Type: object
ts
interface TsConfigOverrides {
  compilerOptions?: Record<string, unknown>
  include?: string[]
  exclude?: string[]
  references?: Array<{ path: string }>
}

Example:

ts
export default defineKmConfig({
  typescript: {
    strict: true,
    typeCheck: 'build',
    tsConfig: {
      compilerOptions: {
        experimentalDecorators: true,
        emitDecoratorMetadata: true,
      },
    },
  },
})

watch

Additional file patterns to watch during development. Uses glob patterns relative to the project root.

  • Type: string[]

Example:

ts
export default defineKmConfig({
  watch: ['./custom-dir/**/*', './config/**/*.json'],
})

watchers

Advanced watcher configuration for customizing file watching behavior.

watchers.chokidar

Chokidar options for file watching.

  • Type: ChokidarOptions
ts
interface ChokidarOptions {
  persistent?: boolean // Keep process running (default: true)
  ignored?: string | RegExp | string[] // Patterns to ignore
  usePolling?: boolean // Use polling instead of native events
  interval?: number // Polling interval (default: 100)
  binaryInterval?: number // Binary file polling interval (default: 300)
  awaitWriteFinish?: boolean | { stabilityThreshold?: number; pollInterval?: number }
  atomic?: boolean | number
  depth?: number // Watch depth limit
}

Example:

ts
export default defineKmConfig({
  watchers: {
    chokidar: {
      usePolling: true,
      interval: 1000,
      ignored: ['**/.git/**'],
    },
  },
})

app

Application-level configuration including head management and other app-wide settings.

app.head

Global head configuration for the app. Automatically enables @kimesh/head plugin when configured.

  • Type: object

app.head.title

The default page title.

  • Type: string

app.head.titleTemplate

A template for the page title. Use %s as a placeholder for the page-specific title.

  • Type: string | ((title: string) => string)

Example:

ts
titleTemplate: '%s | My App'
// or as a function
titleTemplate: (title) => (title ? `${title} - My App` : 'My App')

app.head.meta

Array of meta tags to include globally.

  • Type: Array<Record<string, string | undefined>>

Array of link tags to include globally.

  • Type: Array<Record<string, string | undefined>>

app.head.script

Array of script tags to include globally.

  • Type: Array<Record<string, string | boolean | undefined>>

app.head.style

Array of style tags to include globally.

  • Type: Array<Record<string, string | undefined>>

app.head.htmlAttrs

Attributes to add to the <html> element.

  • Type: Record<string, string | undefined>

app.head.bodyAttrs

Attributes to add to the <body> element.

  • Type: Record<string, string | undefined>

Example:

ts
export default defineKmConfig({
  app: {
    head: {
      title: 'My Application',
      titleTemplate: '%s | My App',
      meta: [
        { charset: 'utf-8' },
        { name: 'viewport', content: 'width=device-width, initial-scale=1' },
        { name: 'description', content: 'An awesome application built with Kimesh' },
      ],
      link: [
        { rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' },
        { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Inter' },
      ],
      script: [{ src: 'https://analytics.example.com/script.js', async: true }],
      htmlAttrs: {
        lang: 'en',
      },
      bodyAttrs: {
        class: 'antialiased',
      },
    },
  },
})

router

Router configuration options.

router.routesDir

The directory containing route files, relative to the source directory.

  • Type: string
  • Default: "routes"

router.importMode

The import mode for route components.

  • Type: "async" | "sync"
  • Default: "async"

Example:

ts
export default defineKmConfig({
  router: {
    routesDir: 'pages', // Use 'pages' instead of 'routes'
    importMode: 'async', // Lazy load route components
  },
})

modules

Kimesh modules to load. Modules extend Kimesh's functionality with Vite plugins, auto-imports, component registration, and more.

  • Type: KimeshModuleInput[]

Each module can be specified as:

  • A string (package name resolved from node_modules)
  • A module object
  • A tuple of [module, options]
  • A tuple of [string, options]

Note: Modules are executed sequentially, so the order is important.

Example:

ts
import tailwindcss from '@kimesh/tailwindcss'
import shadcn from '@kimesh/shadcn'

export default defineKmConfig({
  modules: [
    // Using module with defaults
    tailwindcss,

    // Using module with custom options
    [shadcn, { prefix: 'Ui' }],

    // Using string reference (resolved from node_modules)
    '@kimesh/some-module',

    // String with options
    ['@kimesh/another-module', { enabled: true }],
  ],
})

See: Modules Guide for detailed information on using and creating modules.


extends

Extend from other layers. Layers allow you to compose your application from multiple sources.

  • Type: Array<string | { name: string; path?: string }>

Example:

ts
export default defineKmConfig({
  extends: [
    // Local layer directory
    './layers/ui-layer',

    // npm package
    '@my-org/base-layer',

    // Object format with custom name
    { name: 'custom', path: '../shared-layer' },
  ],
})

See: Layers Guide for detailed information on working with layers.


layers

Configuration for layer resolution and management.

layers.dirs

Directories to scan for layers.

  • Type: string[]
  • Default: ["layers"]

layers.enabled

Which layers to enable.

  • Type: "all" | "none" | string[]
  • Default: "all"

layers.excluded

Layers to exclude from the application.

  • Type: string[]

Example:

ts
export default defineKmConfig({
  layers: {
    dirs: ['layers', 'packages'],
    enabled: ['ui-layer', 'auth-layer'], // Only enable specific layers
    excluded: ['deprecated-layer'],
  },
})

basePath

Base path for routes. Primarily used in layers to prefix all routes.

  • Type: string

Example:

ts
// In a layer's kimesh.config.ts
export default defineKmConfig({
  name: 'admin-layer',
  basePath: '/admin', // All routes will be prefixed with /admin
})

css

CSS files to include globally. Kimesh will automatically include these files in the application.

  • Type: string[]

Example:

ts
export default defineKmConfig({
  css: [
    '~/assets/css/main.css',
    '~/assets/css/variables.scss',
    'normalize.css', // From node_modules
  ],
})

autoImport

Configure Kimesh's auto-import feature for composables and utilities.

autoImport.enabled

Enable or disable auto-imports.

  • Type: boolean
  • Default: true

autoImport.dirs

Additional directories to scan for composables.

  • Type: string[]
  • Default: ["composables", "utils"]

autoImport.presets

External import presets to use (e.g., vue, vue-router).

  • Type: string[]

autoImport.imports

Custom import sources to add.

  • Type: Array<{ from: string; imports: string[]; type?: boolean }>

autoImport.dts

Generate TypeScript declaration files for auto-imports.

  • Type: boolean
  • Default: true

Example:

ts
export default defineKmConfig({
  autoImport: {
    enabled: true,
    dirs: ['composables', 'utils', 'stores'],
    presets: ['vue', 'vue-router', 'pinia'],
    imports: [
      {
        from: 'date-fns',
        imports: ['format', 'parseISO', 'differenceInDays'],
      },
      {
        from: '@vueuse/core',
        imports: ['useMouse', 'useLocalStorage'],
      },
    ],
    dts: true,
  },
})

components

Configure component auto-registration.

components.enabled

Enable or disable component auto-imports.

  • Type: boolean
  • Default: true

components.dirs

Directories to scan for components.

  • Type: string[]
  • Default: ["components"]

components.prefix

Prefix to add to component names.

  • Type: string

components.global

Register components globally instead of on-demand.

  • Type: boolean
  • Default: false

Example:

ts
export default defineKmConfig({
  components: {
    enabled: true,
    dirs: ['components', 'shared/components'],
    prefix: 'App', // <AppButton>, <AppCard>, etc.
    global: false,
  },
})

composables

Configuration for composable scanning in layers.

composables.dirs

Directories to scan for composables.

  • Type: string[]
  • Default: ["composables"]

Example:

ts
export default defineKmConfig({
  composables: {
    dirs: ['composables', 'hooks'],
  },
})

routes

Route configuration for layers.

routes.basePath

Base path for all routes in this layer.

  • Type: string

routes.folder

The folder name containing routes.

  • Type: string
  • Default: "routes"

Example:

ts
export default defineKmConfig({
  routes: {
    basePath: '/dashboard',
    folder: 'views',
  },
})

runtimeConfig

Runtime configuration with environment variable override support.

Values defined here can be overridden using KIMESH_* environment variables at build time. The naming convention converts camelCase to SCREAMING_SNAKE_CASE.

  • Type: RuntimeConfig

Example:

ts
export default defineKmConfig({
  runtimeConfig: {
    // KIMESH_API_BASE
    apiBase: '/api',

    // KIMESH_DEBUG
    debug: false,

    // Nested config
    // KIMESH_FETCH_BASE_URL
    // KIMESH_FETCH_TIMEOUT
    fetch: {
      baseURL: 'https://api.example.com',
      timeout: 10000,
      retry: 1,
    },

    // KIMESH_FEATURES_DARK_MODE
    features: {
      darkMode: true,
      analytics: false,
    },
  },
})

Environment Variable Override:

bash
# Override at build time
KIMESH_API_BASE=https://api.production.com
KIMESH_DEBUG=true
KIMESH_FETCH_TIMEOUT=30000

Accessing in Code:

ts
import { useRuntimeConfig } from '@kimesh/kit'

const config = useRuntimeConfig()
console.log(config.apiBase) // 'https://api.production.com'

vite

Vite configuration options. These are merged with Kimesh's internal Vite configuration.

  • Type: Omit<ViteUserConfig, 'root' | 'configFile'>

Note: Not all Vite options are supported. Kimesh manages certain options internally.

Example:

ts
import tailwindcss from '@tailwindcss/vite'

export default defineKmConfig({
  vite: {
    plugins: [tailwindcss()],

    css: {
      preprocessorOptions: {
        scss: {
          additionalData: '@import "@/assets/scss/variables.scss";',
        },
      },
    },

    build: {
      target: 'esnext',
      minify: 'esbuild',
    },

    optimizeDeps: {
      include: ['lodash-es'],
    },

    server: {
      proxy: {
        '/api': {
          target: 'http://localhost:8080',
          changeOrigin: true,
        },
      },
    },
  },
})

See: Vite Configuration Docs for all available Vite options.


Module Options

Modules can augment the configuration interface to add their own options. When a module is installed, its configuration options become available at the top level.

Type Augmentation

Modules declare their options by augmenting KimeshModuleOptions:

ts
// In @kimesh/tailwindcss/types.ts
declare module '@kimesh/kit' {
  interface KimeshModuleOptions {
    tailwindcss?: KimeshTailwindConfig
  }
}

This makes the options available in kimesh.config.ts with full type support:

ts
export default defineKmConfig({
  // Module options are typed when the module augments KimeshModuleOptions
  tailwindcss: {
    autoReference: true,
    mainCss: 'src/app.css',
  },
})

Full Example

Here's a comprehensive example showing various configuration options:

ts
import { defineKmConfig } from '@kimesh/kit'
import tailwindcss from '@kimesh/tailwindcss'
import shadcn from '@kimesh/shadcn'

export default defineKmConfig({
  name: 'my-application',

  // Development server
  dev: {
    port: 3000,
    host: 'localhost',
    open: true,
  },

  // App configuration
  app: {
    head: {
      title: 'My Application',
      titleTemplate: '%s | My App',
      meta: [
        { charset: 'utf-8' },
        { name: 'viewport', content: 'width=device-width, initial-scale=1' },
        { name: 'description', content: 'Built with Kimesh' },
      ],
      link: [{ rel: 'icon', href: '/favicon.ico' }],
      htmlAttrs: {
        lang: 'en',
      },
    },
  },

  // Router
  router: {
    routesDir: 'routes',
    importMode: 'async',
  },

  // Modules
  modules: [tailwindcss, [shadcn, { prefix: 'Ui' }]],

  // Layers
  extends: ['./layers/ui', '@my-org/base-layer'],

  // CSS
  css: ['~/assets/css/main.css'],

  // Auto-imports
  autoImport: {
    dirs: ['composables', 'utils'],
    presets: ['vue', 'vue-router'],
  },

  // Components
  components: {
    dirs: ['components'],
    prefix: 'App',
  },

  // Runtime config
  runtimeConfig: {
    apiBase: '/api',
    features: {
      darkMode: true,
    },
  },

  // Vite
  vite: {
    build: {
      target: 'esnext',
    },
  },
})

Configuration Files

Kimesh looks for configuration files in the following order:

  1. kimesh.config.ts
  2. kimesh.config.js
  3. kimesh.config.mjs
  4. kimesh.config.cjs

The configuration is loaded using c12, which supports:

  • TypeScript configuration files
  • Environment-specific configurations
  • Configuration layers

Environment Variables

Kimesh automatically resolves environment variables prefixed with KIMESH_ and maps them to runtime configuration:

Environment VariableConfig PathType
KIMESH_API_BASEruntimeConfig.apiBasestring
KIMESH_DEBUGruntimeConfig.debugboolean
KIMESH_FETCH_BASE_URLruntimeConfig.fetch.baseURLstring
KIMESH_FETCH_TIMEOUTruntimeConfig.fetch.timeoutnumber

Type Coercion:

Environment variables are automatically parsed using destr:

  • "true" / "false" → boolean
  • "123" → number
  • "{...}" → JSON object

TypeScript Support

The defineKmConfig function provides full TypeScript support with autocompletion and type checking:

ts
import { defineKmConfig } from '@kimesh/kit'

export default defineKmConfig({
  // Full type inference and autocompletion
})

The generated TypeScript configurations are written to .kimesh/ directory:

  • .kimesh/tsconfig.json - TypeScript path mappings
  • .kimesh/types.d.ts - Global type declarations
  • .kimesh/auto-imports.d.ts - Auto-import types
  • .kimesh/components.d.ts - Component type declarations
  • .kimesh/routes.gen.ts - Generated route types

The km prepare Command

Before you can use IDE features like auto-completion for path aliases (~/, @/, etc.), you need to generate the .kimesh directory with all TypeScript configurations. This is done using the km prepare command.

Usage

bash
# Run prepare manually
km prepare

# With options
km prepare --root ./my-app --verbose

What it Generates

The km prepare command generates the following files in the .kimesh/ directory:

FileDescription
tsconfig.jsonTypeScript path mappings for all aliases (default + custom + layer + module)
context.d.tsKimesh context type declarations
auto-imports.d.tsAuto-import type declarations (stub, populated by auto-import plugin)
components.d.tsComponent type declarations (stub, populated by component plugin)
routes.gen.tsGenerated route types (stub, populated by router plugin)
modules.tsModule metadata and exports
plugins.mjsRuntime plugin configuration

Automatic Execution

It's recommended to run km prepare automatically after package installation. Add these scripts to your package.json:

json
{
  "scripts": {
    "prepare": "km prepare",
    "postinstall": "km prepare",
    "dev": "km dev",
    "build": "km build"
  }
}

Note: The postinstall script ensures the .kimesh directory is generated immediately after dependencies are installed, so IDE features work right away.

When to Run

You should run km prepare:

  • After cloning a project
  • After installing/updating dependencies
  • After modifying kimesh.config.ts (especially aliases, modules, or layers)
  • After adding new layers
  • When switching branches that may have different configurations

Command Options

OptionDescriptionDefault
--root, -rRoot directory of the projectCurrent directory
--config, -cPath to config fileAuto-detected
--verbose, -vEnable verbose outputfalse

Programmatic Usage

You can also use the prepare function programmatically:

ts
import { prepare } from '@kimesh/kit'

const result = await prepare({
  root: './my-app',
  configFile: './kimesh.config.ts',
  verbose: true,
})

console.log('Generated:', result.generatedFiles)

Next Steps

Released under the MIT License.