Composables

All composables listed here are auto-imported — no import statements needed.

Navigation & Routing

useNavigate

Programmatic navigation function.

const navigate = useNavigate()

// Navigate to path
navigate('/about')

// Navigate with route name
navigate({ name: 'posts-id', params: { id: '123' } })

// Replace instead of push
navigate('/about', { replace: true })

Returns: (to: RouteLocationRaw, options?: NavigateOptions) => Promise<void>

Source: @kimesh/router-runtime

---

useParams

Access current route params (non-reactive snapshot).

const params = useParams()
console.log(params.id) // string

Source: @kimesh/router-runtime

---

useReactiveParams

Access current route params as a reactive computed ref.

const params = useReactiveParams<'/posts/:id'>()
// params.value.id — reactive, updates on navigation

Returns: ComputedRef<RouteParams>

Source: @kimesh/router-runtime

---

useSearch

Access validated search/query params from validateSearch.

// In a route with validateSearch defined
const search = useSearch<'/posts'>()
console.log(search.value.page)   // number
console.log(search.value.sort)   // 'asc' | 'desc'

Returns: ComputedRef<SearchSchema>

Source: @kimesh/router-runtime

---

useRouteQuery

Two-way binding for a single URL query parameter.

const page = useRouteQuery('page', '1')
// page.value = '2' → URL becomes ?page=2

Signature:

function useRouteQuery(
  key: string,
  defaultValue?: string,
  options?: UseRouteQueryOptions
): Ref<string>

Source: @kimesh/router-runtime

---

useRouteQueryNumber

Two-way binding for a numeric query parameter.

const page = useRouteQueryNumber('page', 1)
// page.value = 2 → URL becomes ?page=2

Source: @kimesh/router-runtime

---

useRouteQueryBoolean

Two-way binding for a boolean query parameter.

const showAll = useRouteQueryBoolean('showAll', false)
// showAll.value = true → URL becomes ?showAll=true

Source: @kimesh/router-runtime

---

Data Loading

useLoaderData

Access data returned from the current route's loader function.

const data = useLoaderData<{ post: Post }>()
console.log(data.value.post)

Returns: Ref<T>

Source: @kimesh/router-runtime

---

useLayoutData

Access data from the parent layout's loader.

const layoutData = useLayoutData<{ categories: Category[] }>()
console.log(layoutData.value?.categories)

Returns: Ref<T | undefined>

Source: @kimesh/router-runtime

---

useMatchLoaderData

Access loader data from a specific matched route.

const postsData = useMatchLoaderData<PostsData>('/posts')

Source: @kimesh/router-runtime

---

useRouteLoaderData

Access all matched route loader data as a map.

const allData = useRouteLoaderData()
// allData.value = { '/posts': {...}, '/posts/:id': {...} }

Source: @kimesh/router-runtime

---

Data Fetching

useQuery

TanStack Query composable for data fetching with caching.

const { data, isLoading, error, refetch } = useQuery({
  queryKey: ['posts'],
  queryFn: () => fetch('/api/posts').then(r => r.json()),
})

Re-exported from: @tanstack/vue-query

---

useMutation

TanStack Query composable for mutations.

const { mutate, isPending } = useMutation({
  mutationFn: (newPost) => fetch('/api/posts', {
    method: 'POST',
    body: JSON.stringify(newPost),
  }),
})

Re-exported from: @tanstack/vue-query

---

useQueryClient

Access the TanStack Query client instance.

const queryClient = useQueryClient()
queryClient.invalidateQueries({ queryKey: ['posts'] })

Re-exported from: @tanstack/vue-query

---

useInfiniteQuery

TanStack Query composable for infinite/paginated queries.

const { data, fetchNextPage, hasNextPage } = useInfiniteQuery({
  queryKey: ['posts'],
  queryFn: ({ pageParam }) => fetchPosts(pageParam),
  getNextPageParam: (lastPage) => lastPage.nextCursor,
  initialPageParam: 0,
})

Re-exported from: @tanstack/vue-query

---

useSuspenseQuery

Suspense-compatible query that triggers Vue's <Suspense> boundary.

<script setup>
// Top-level await triggers Suspense
const { data } = await useSuspenseQuery({
  queryKey: ['posts'],
  queryFn: fetchPosts,
})
</script>

Source: @kimesh/query

---

useSuspenseInfiniteQuery

Suspense-compatible infinite query.

<script setup>
const { data, fetchNextPage } = await useSuspenseInfiniteQuery({
  queryKey: ['posts'],
  queryFn: ({ pageParam }) => fetchPosts(pageParam),
  getNextPageParam: (lastPage) => lastPage.nextCursor,
  initialPageParam: 0,
})
</script>

Source: @kimesh/query

---

useKmFetch

Nuxt-style fetch composable with auto-refresh and caching.

const { data, pending, error, refresh } = useKmFetch('/api/posts')

// With options
const { data } = useKmFetch('/api/posts', {
  method: 'POST',
  body: { page: 1 },
  watch: [page],        // Re-fetch when page changes
  immediate: true,      // Fetch on mount
})

Source: @kimesh/query

---

useLazyKmFetch

Same as useKmFetch but doesn't block navigation. Fetches in the background.

const { data, pending } = useLazyKmFetch('/api/posts')

Source: @kimesh/query

---

useKmAsyncData

Nuxt-style async data composable for custom fetch functions.

const { data, pending, error } = useKmAsyncData('posts', () =>
  fetch('/api/posts').then(r => r.json())
)

Source: @kimesh/query

---

useLazyKmAsyncData

Non-blocking version of useKmAsyncData.

const { data, pending } = useLazyKmAsyncData('posts', fetchPosts)

Source: @kimesh/query

---

useKmData

Simplified data composable combining fetch + query features.

const { data } = useKmData('posts', fetchPosts)

Source: @kimesh/query

---

State Management

useState

SSR-friendly reactive state composable.

const count = useState('counter', () => 0)
count.value++

Signature:

function useState<T>(key: string, init?: () => T): Ref<T>

Source: @kimesh/router-runtime

---

Head Management

useHead

Reactively set <head> tags.

useHead({
  title: 'My Page',
  meta: [
    { name: 'description', content: 'Page description' },
  ],
  link: [
    { rel: 'canonical', href: 'https://example.com/page' },
  ],
})

// Reactive
const title = ref('Loading')
useHead({ title })

Source: @kimesh/head

---

useSeoMeta

Flat API for SEO meta tags.

useSeoMeta({
  title: 'My Page',
  ogTitle: 'My Page',
  description: 'A description',
  ogDescription: 'A description',
  ogImage: 'https://example.com/image.png',
  twitterCard: 'summary_large_image',
})

Source: @kimesh/head

---

useHeadSafe

Same as useHead but sanitizes input to prevent XSS.

useHeadSafe({
  title: userInput, // Sanitized
  script: [{ innerHTML: userScript }], // Sanitized
})

Source: @kimesh/head

---

useRouteHead

Access the computed head configuration for the current route.

const head = useRouteHead()
console.log(head.value.title)

Source: @kimesh/head

---

App & Config

useRuntimeConfig

Access runtime configuration defined in kimesh.config.ts.

const config = useRuntimeConfig()
console.log(config.apiBase)
console.log(config.features.darkMode)

Source: @kimesh/router-runtime

---

useKimeshApp

Access the Kimesh app context (Vue app, router, query client).

const { app, router, queryClient } = useKimeshApp()

Source: @kimesh/router-runtime

---

Navigation Middleware

useNavigationMiddleware

Register a navigation middleware from a component.

useNavigationMiddleware((context) => {
  console.log(`Navigating to ${context.to.path}`)
})

Source: @kimesh/router-runtime

---

useNavigationGuard

Register a navigation guard from a component.

useNavigationGuard((context) => {
  if (hasUnsavedChanges.value) {
    return confirm('Discard changes?') ? undefined : false
  }
})

Source: @kimesh/router-runtime

---

useAfterNavigation

Run code after navigation completes.

useAfterNavigation((context) => {
  analytics.track('page_view', { path: context.to.path })
})

Source: @kimesh/router-runtime

---

Vue Router (Re-exported)

These are re-exported from vue-router for convenience:

useRoute

const route = useRoute()
console.log(route.path, route.params, route.query)

useRouter

const router = useRouter()
router.push('/about')

useLink

const { href, isActive, navigate } = useLink({ to: '/about' })