vite-plugin-kit-routes

1.0.3 verified Mon Apr 27 auth: no javascript

vite-plugin-kit-routes is a Vite plugin for SvelteKit that generates a typed route helper file ($lib/ROUTES) from your file system routes. It provides autocompletion, type safety, and avoids typos by letting you reference routes via a type-safe route() function. The latest stable version is 1.0.3, released as part of the KitQL ecosystem. It requires SvelteKit ^2.4.0 and Vite ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0. Compared to manual route strings or other route generation tools, it integrates directly as a Vite plugin, generates TypeScript types automatically, and updates the route file on save. Release cadence follows monthly updates alongside other KitQL packages.

Common errors

error Error: Cannot find module '$lib/ROUTES' or its corresponding type declarations. ↓

cause The plugin has not generated the $lib/ROUTES file yet, or the file is out of sync.

fix

Ensure the plugin is properly added to vite.config and restart the dev server (npm run dev). The file is generated on startup.

error [vite] Internal server error: [plugin:vite-plugin-kit-routes] kitRoutes is not a function ↓

cause Using a default import instead of a named import, or the package is not installed.

fix

Use named import: import { kitRoutes } from 'vite-plugin-kit-routes'. Also check that the package is installed: npm i -D vite-plugin-kit-routes

error TypeError: route is not a function ↓

cause Importing route from the wrong module or the generated file is missing.

fix

Import route from '$lib/ROUTES' (not from the package). Ensure the plugin is running and the file exists.

error Error: [plugin:vite-plugin-kit-routes] Unsupported SvelteKit version. Requires @sveltejs/kit >=2.4.0 ↓

cause Installed @sveltejs/kit version is too old.

fix

Upgrade @sveltejs/kit: npm install @sveltejs/kit@^2.4.0

Warnings

gotcha The route() function is generated in $lib/ROUTES, not imported from vite-plugin-kit-routes. If you try to import from the package, you will get a module not found error. ↓

fix Ensure $lib/ROUTES exists after running the plugin. Import route from '$lib/ROUTES'.

breaking vite-plugin-kit-routes requires @sveltejs/kit ^2.4.0 and Vite ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0. Using older versions will cause compatibility issues. ↓

fix Update dependencies: npm install @sveltejs/kit@^2.4.0 vite@^5.0.0

deprecated Earlier versions (pre-1.0) used a different export pattern. Default import is now deprecated. ↓

fix Use named import: import { kitRoutes } from 'vite-plugin-kit-routes'

Install

npm install vite-plugin-kit-routes

yarn add vite-plugin-kit-routes

pnpm add vite-plugin-kit-routes

Imports

kitRoutes

wrong

import kitRoutes from 'vite-plugin-kit-routes'

correct

import { kitRoutes } from 'vite-plugin-kit-routes'

Named export since v1.0.0. Default import is not available.

route
wrong
```
import { route } from 'vite-plugin-kit-routes'
```
correct
```
import { route } from '$lib/ROUTES'
```
route() is generated in $lib/ROUTES by the plugin. Do not import from the package directly.
Routes
```
import type { Routes } from '$lib/ROUTES'
```
TypeScript type for route parameters, generated in $lib/ROUTES. Useful for parameterized routes.

Quickstart

Shows how to add the plugin to Vite config and use the generated route function in a SvelteKit component.

// vite.config.(js|ts)
import { sveltekit } from '@sveltejs/kit/vite';
import { kitRoutes } from 'vite-plugin-kit-routes';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [
    sveltekit(),
    kitRoutes()
  ]
});

// In a Svelte component or .ts file:
<script lang="ts">
  import { route } from '$lib/ROUTES';
  const url = route('/about'); // typed string
</script>
<a href={url}>About</a>