Auto-Imports

Kimesh automatically imports commonly used APIs so you don't need explicit import statements. This feature is powered by @kimesh/auto-import using the high-performance OXC parser.

How It Works

When you use a function or component, Kimesh automatically adds the import for you at build time. Your source code stays clean, while the compiled output includes all necessary imports.

<script setup>
// No imports needed! These are all auto-imported:
const count = ref(0)               // from 'vue'
const route = useRoute()           // from 'vue-router'
const navigate = useNavigate()     // from 'kimesh'
const config = useRuntimeConfig()  // from 'kimesh'
</script>

<template>
  <!-- Components auto-imported too -->
  <KmLink to="/about">About</KmLink>
</template>

Built-in Presets

Kimesh includes presets for commonly used libraries:

Vue Preset

ref, reactive, computed, watch, watchEffect, onMounted, onUnmounted, nextTick, toRef, toRefs, shallowRef, triggerRef, defineProps, defineEmits, defineExpose, withDefaults, and more.

Vue Router Preset

useRoute, useRouter, useLink, onBeforeRouteLeave, onBeforeRouteUpdate.

Kimesh Preset

createFileRoute, defineRoute, defineContext, defineKimeshMiddleware, defineKimeshRuntimePlugin, navigateTo, abortNavigation, useNavigate, useSearch, useParams, useReactiveParams, useRuntimeConfig, useKimeshApp, useState, useLoaderData, useLayoutData, useMatchLoaderData, useRouteLoaderData, useRouteQuery, useNavigationMiddleware, useNavigationGuard, useAfterNavigation, useHead, useSeoMeta, useHeadSafe, useRouteHead, useKmFetch, useLazyKmFetch, useKmAsyncData, useLazyKmAsyncData, useKmData, useQuery, useMutation, useQueryClient, useInfiniteQuery, useSuspenseQuery, $fetch, defer, defineQuery, defineQueryOptions, defineMutation, createQueryKeyFactory.

TanStack Query Preset

useQuery, useMutation, useQueryClient, useInfiniteQuery, queryOptions.

Pinia Preset

defineStore, storeToRefs, acceptHMRUpdate, mapStores, mapState, mapActions, mapWritableState, mapGetters, setActivePinia, createPinia, getActivePinia.

Custom Directories

Your composables and utilities are automatically scanned:

src/
├── composables/
│   ├── useAuth.ts       # useAuth() auto-imported
│   └── useTheme.ts      # useTheme() auto-imported
└── utils/
    ├── formatDate.ts    # formatDate() auto-imported
    └── validators.ts    # All named exports auto-imported

Add More Directories

// kimesh.config.ts
export default defineKmConfig({
  autoImport: {
    dirs: ['composables', 'utils', 'stores', 'helpers'],
  },
})

Custom Import Sources

Add imports from external libraries:

export default defineKmConfig({
  autoImport: {
    imports: [
      {
        from: 'date-fns',
        imports: ['format', 'parseISO', 'differenceInDays'],
      },
      {
        from: '@vueuse/core',
        imports: ['useMouse', 'useLocalStorage', 'useDark'],
      },
    ],
  },
})

Component Auto-Import

Components from src/components/ are automatically registered:

src/components/
├── AppButton.vue         # <AppButton>
├── AppCard.vue           # <AppCard>
└── layout/
    ├── Header.vue        # <LayoutHeader>
    └── Footer.vue        # <LayoutFooter>

Configuration

export default defineKmConfig({
  components: {
    dirs: ['components', 'shared/components'],
    prefix: 'App',     // <AppButton> instead of <Button>
  },
})

Layer Support

Auto-imports work across layers. When multiple layers export the same name:

1. Host app takes highest priority (always wins)
2. Later layers in extends array take priority over earlier ones
3. Conflicts are logged in debug mode

TypeScript Support

Kimesh generates type declarations in .kimesh/:

• .kimesh/auto-imports.d.ts — Types for auto-imported functions
• .kimesh/components.d.ts — Types for auto-imported components

Run km prepare to regenerate these files for IDE support.

Disabling Auto-Imports

export default defineKmConfig({
  autoImport: {
    enabled: false,  // Disable all auto-imports
  },
})

Or disable specific presets while keeping others:

export default defineKmConfig({
  autoImport: {
    presets: ['vue'], // Only auto-import Vue APIs
  },
})

Explicit Imports

Even with auto-imports enabled, you can still use explicit imports:

import { ref, computed } from 'vue'
import { useRoute } from 'vue-router'
import { useNavigate } from 'kimesh'

Explicit imports always take precedence over auto-imports.