{"id":"dbb4db3d-885e-4406-944a-54bc3706edd0","shortId":"aFAt68","kind":"skill","title":"litestar-vite","tagline":"Auto-activate for litestar_vite imports, VitePlugin, ViteConfig, PathConfig, RuntimeConfig, TypeGenConfig, InertiaConfig, vite.config.ts, astro.config.mjs with litestar-vite-plugin/astro, litestar assets, HMR, or generated route/schema assets. Use when wiring a Vite frontend with","description":"# litestar-vite\n\n`litestar-vite` is the first-party plugin that connects a [Vite](https://vite.dev/) frontend build pipeline to a Litestar backend. It handles dev-server proxying, HMR coordination, manifest resolution for production assets, and (optionally) end-to-end type generation from Litestar OpenAPI to TypeScript.\n\nThe reference apps use `spa`, `template`, `hybrid`, `ssr`, `ssg`, and `external` modes. HTMX is a template-mode app with `HTMXPlugin()` layered in. Inertia is one `VitePlugin` configured with `ViteConfig(inertia=InertiaConfig(...))`; the plugin wires the internal Inertia integration from that config.\n\nThe plugin pairs with the npm package [`litestar-vite-plugin`](https://www.npmjs.com/package/litestar-vite-plugin) on the JS side. Both must agree on `input`, `bundleDir`, `hotFile`, and asset URL.\n\n## Code Style Rules\n\n- **Python**: PEP 604 unions (`T | None`); consumer Litestar app modules MAY use `from __future__ import annotations`.\n- **TypeScript**: strict mode; `defineConfig` from `vite`; one `vite.config.ts` per frontend project.\n- The Python `ViteConfig` and JS `vite.config.ts` are a single coupled contract. Change them together or HMR/manifest will silently break.\n\n## Quick Reference\n\n### Minimal SPA setup (Python side)\n\n```python\nfrom litestar import Litestar\nfrom litestar_vite import PathConfig, RuntimeConfig, ViteConfig, VitePlugin\n\nvite_config = ViteConfig(\n    mode=\"spa\",\n    paths=PathConfig(\n        resource_dir=\"resources\",       # frontend source root\n        bundle_dir=\"public\",            # built assets land here\n        hot_file=\"hot\",                 # MUST match vite.config.ts hotFile\n    ),\n    runtime=RuntimeConfig(port=5173),\n    dev_mode=True,                      # toggled by env in production\n)\n\napp = Litestar(plugins=[VitePlugin(config=vite_config)])\n```\n\n### Minimal SPA setup (JS side)\n\n```ts\n// vite.config.ts\nimport { defineConfig } from \"vite\"\nimport litestar from \"litestar-vite-plugin\"\nimport react from \"@vitejs/plugin-react\"\n\nexport default defineConfig({\n  clearScreen: false,\n  publicDir: \"public\",\n  server: { cors: true },\n  plugins: [\n    react(),\n    litestar({\n      input: [\"resources/main.tsx\", \"resources/main.css\"],\n    }),\n  ],\n  resolve: { alias: { \"@\": \"/resources\" } },\n})\n```\n\n### Mode Selection\n\n| Mode | Use For | Key Setup |\n| --- | --- | --- |\n| `spa` | React, Vue, Svelte, or Analog-powered Angular SPA with a Litestar JSON API backend | `dev_mode=True` proxies to Vite; manifest in prod |\n| `template` | Server-rendered Jinja2/Mako pages with Vite-bundled JS/CSS sprinkles | `TemplateConfig` + template helpers resolve dev/prod URLs |\n| `template` + `HTMXPlugin()` | HTMX hypermedia with Jinja templates and Vite-bundled assets | Add `litestar-htmx`; use `hx-*` and `ls-*` attributes |\n| `hybrid` (Inertia) | Inertia.js routes returning JS page components | `ViteConfig(inertia=InertiaConfig(...))` on a single `VitePlugin` |\n| `ssr` | Nuxt or SvelteKit SSR | JS framework owns rendering; Litestar provides/proxies API |\n| `ssg` | Astro static generation | `astro.config.mjs` imports `litestar-vite-plugin/astro` |\n| `external` | Angular CLI or another external dev/build process | Litestar coordinates URLs/types while the external tool owns build |\n\nDecision tree:\n\n- Need full SPA with client-side routing → **spa**\n- Server-rendered HTML, sprinkle Vite-bundled JS → **template**\n- HTMX-driven hypermedia with Vite assets → **template + HTMXPlugin**\n- Server-side routing + JS page components, shared data → **hybrid (Inertia)** (see `../litestar-inertia/SKILL.md`)\n- Already using Nuxt or SvelteKit → **ssr**\n- Building an Astro site → **ssg**\n- Using Angular CLI rather than the Analog Vite example → **external**\n\n### `VitePlugin` config (Python)\n\n```python\nfrom litestar_vite import (\n    ViteConfig, VitePlugin, PathConfig, RuntimeConfig, TypeGenConfig,\n)\n\nvite_config = ViteConfig(\n    mode=\"spa\",\n    dev_mode=False,           # True in dev, False in prod (env-toggled)\n    paths=PathConfig(\n        root=\".\",\n        resource_dir=\"src\",\n        bundle_dir=\"public\",\n        static_dir=\"src/public\",\n        hot_file=\"hot\",\n        asset_url=\"/static/\",\n    ),\n    runtime=RuntimeConfig(\n        port=5173,\n        host=\"localhost\",\n        protocol=\"http\",\n        executor=\"bun\",\n    ),\n    types=TypeGenConfig(\n        generate_sdk=True,\n        generate_routes=True,\n        generate_schemas=True,\n        generate_page_props=True,\n        output=\"src/generated\",\n    ),\n)\n```\n\n### Canonical fullstack-spa pattern\n\nFrom [litestar-fullstack](https://github.com/litestar-org/litestar-fullstack) — `src/js/web/vite.config.ts`:\n\n```ts\nimport path from \"node:path\"\nimport tailwindcss from \"@tailwindcss/vite\"\nimport { tanstackRouter } from \"@tanstack/router-plugin/vite\"\nimport react from \"@vitejs/plugin-react\"\nimport litestar from \"litestar-vite-plugin\"\nimport { defineConfig } from \"vite\"\n\nexport default defineConfig({\n  clearScreen: false,\n  base: process.env.ASSET_URL ?? \"/static/web/\",\n  publicDir: \"public\",\n  server: {\n    cors: true,\n    port: Number(process.env.VITE_PORT ?? 3006),\n  },\n  build: {\n    outDir: path.resolve(__dirname, \"../../py/app/server/static/web\"),\n    emptyOutDir: true,\n  },\n  plugins: [\n    tanstackRouter({ target: \"react\", autoCodeSplitting: true }),\n    tailwindcss(),\n    react(),\n    litestar({\n      input: [\"src/main.tsx\", \"src/styles.css\"],\n      bundleDir: path.resolve(__dirname, \"../../py/app/server/static/web\"),\n      hotFile: path.resolve(__dirname, \"../../py/app/server/static/web/hot\"),\n    }),\n  ],\n  resolve: { alias: { \"@\": path.resolve(__dirname, \"./src\") } },\n})\n```\n\n`litestar-fullstack/src/py/app/server/plugins.py`:\n\n```python\nfrom litestar_vite import VitePlugin\nfrom app import config\n\nvite = VitePlugin(config=config.vite)\n```\n\nThe `config.vite` `ViteConfig` references the **same** `bundle_dir`, `hot_file`, and `resource_dir` paths as the JS-side `vite.config.ts`. They are one coupled contract.\n\n### Type Generation\n\n```python\nTypeGenConfig(\n    generate_sdk=True,\n    generate_routes=True,\n    generate_schemas=True,\n    generate_page_props=True,    # Inertia only\n    output=\"src/generated\",\n)\n```\n\n| Output | Path | Trigger | Frontend Use |\n| --- | --- | --- | --- |\n| `openapi.json` | `output/openapi.json` | Whenever OpenAPI schema changes | Source of truth for SDK + schemas |\n| `routes.ts` | `output/routes.ts` | Route table changes | `route(\"name\", { params })` typed URL builder |\n| `schemas.ts` | `output/schemas.ts` | Pydantic / msgspec DTO changes | `components[\"schemas\"][\"User\"]` typed models |\n| `inertia-pages.json` | `output/inertia-pages.json` | Inertia handlers added/changed | Page-prop typing for Inertia adapters |\n\nCLI:\n\n```bash\nlitestar assets generate-types          # one-off generation\nlitestar assets export-routes           # routes.ts only\nlitestar --app app:app run              # generates on startup if enabled\n```\n\nFrontend consumption:\n\n```ts\n// routes\nimport { route } from \"@/generated/routes\"\nconst url = route(\"users:get\", { id: 123 })\n\n// schemas\nimport type { components } from \"@/generated/schemas\"\ntype User = components[\"schemas\"][\"User\"]\n```\n\n### `ViteAssetLoader` and Template Helpers\n\nAuto-registered Jinja2 globals when a template engine is configured:\n\n| Helper | Use |\n| --- | --- |\n| `{{ vite('resources/main.ts') }}` | Render script/link tags for a Vite input; handles dev vs manifest |\n| `{{ vite_hmr() }}` | Inject HMR client `<script>` in dev mode; no-op in prod |\n| `{{ vite_static('favicon.svg') }}` | Resolve a static asset URL |\n| `{{ vite_routes() }}` | Render inline route metadata for client-side routing |\n\nMinimal base template:\n\n```html\n<!DOCTYPE html>\n<html>\n<head>\n  {{ vite_hmr() }}\n  {{ vite('resources/main.tsx') }}\n</head>\n<body>\n  <div id=\"app\"></div>\n</body>\n</html>\n```\n\nFor programmatic use inside a handler:\n\n```python\nfrom litestar import get\nfrom litestar.response import Template\nfrom litestar_vite import ViteAssetLoader\n\nloader = ViteAssetLoader(config=vite_config)\n\n@get(\"/\")\nasync def index() -> Template:\n    return Template(\"index.html\", context={\"vite\": loader})\n```\n\n### CLI\n\n```bash\nlitestar assets init             # Scaffold vite.config.ts and package.json\nlitestar assets install          # Run npm/pnpm/bun install\nlitestar assets serve            # Start Vite dev server (also auto-started when `dev_mode=True`)\nlitestar assets build            # Production build (emits manifest.json + hashed bundles)\nlitestar assets generate-types   # TypeScript type generation\nlitestar assets export-routes    # routes.ts only\nlitestar assets status           # Verify integration health\n```\n\n### HMR\n\nIn dev mode:\n\n1. Vite dev server runs on `runtime.port` (e.g., `5173`).\n2. Plugin writes a \"hot file\" (path = `hot_file`) signaling dev-mode is active.\n3. `vite()` returns proxied URLs (`http://localhost:5173/...`) instead of manifest paths.\n4. `vite_hmr()` injects the HMR client script.\n5. On rebuild, Vite pushes updates over WS; the page hot-swaps without a reload.\n\nCommon HMR gotchas:\n\n- **Hot file mismatch**: `ViteConfig.paths.hot_file` and `vite.config.ts` `hotFile` must point to the same marker. Mismatch ⇒ stale prod URLs in dev.\n- **CORS errors**: set `server.cors: true` in `vite.config.ts` so the Litestar origin can fetch dev assets.\n- **Port conflict**: pin `runtime.port` and `server.port`; do not let Vite auto-pick.\n- **Browsers cache `manifest.json`**: cache-bust by hash; never serve manifest.json from a CDN with long TTL.\n\n### Production Build & Deploy\n\n```bash\n# Build for production\nlitestar assets build\n\n# Outputs:\n#   <bundle_dir>/manifest.json     ← URL → hashed-asset map\n#   <bundle_dir>/assets/*.js       ← hashed JS bundles\n#   <bundle_dir>/assets/*.css      ← hashed CSS bundles\n#   <bundle_dir>/<public files>    ← copied from publicDir\n```\n\nIn production:\n\n- Set `dev_mode=False` (env-toggled).\n- Litestar serves `bundle_dir` as static files OR a CDN serves them and `base` (Vite) / `assetUrl` (plugin) points at the CDN.\n- `vite()` reads `manifest.json` and returns hashed asset tags.\n- HMR helpers become no-ops.\n\nCDN pattern:\n\n```ts\n// vite.config.ts\nexport default defineConfig({\n  base: process.env.ASSET_URL ?? \"/static/\",   // CDN URL in prod, /static/ in dev\n  ...\n})\n```\n\n### Inertia integration\n\n```python\nfrom litestar_vite import InertiaConfig, PathConfig, TypeGenConfig, ViteConfig, VitePlugin\n\nvite = VitePlugin(\n    config=ViteConfig(\n        mode=\"hybrid\",\n        paths=PathConfig(resource_dir=\"resources\"),\n        inertia=InertiaConfig(root_template=\"base.html\"),\n        types=TypeGenConfig(output=\"resources/generated\"),\n    )\n)\n\napp = Litestar(plugins=[vite], middleware=[session_backend.middleware])\n```\n\nSee `../litestar-inertia/SKILL.md` for client adapter setup.\n\n### HTMX integration\n\nFor HTMX + Jinja, use `ViteConfig(mode=\"template\", ...)`, Litestar `TemplateConfig`, and `HTMXPlugin()`. Vite handles JS/CSS bundling; Litestar returns partial HTML enriched with `hx-*` attributes. See `../litestar-htmx/SKILL.md`.\n\n<workflow>\n\n## Workflow\n\n### Step 1: Pick the Mode\n\nRun the decision tree above. Most apps want `spa`, `template`, or `hybrid`. Lock the choice before configuring — switching mode mid-project rewires paths, assets, and TypeGen output.\n\n### Step 2: Install\n\n```bash\npip install litestar-vite\nnpm install -D vite litestar-vite-plugin\n# Plus a framework adapter, e.g.:\nnpm install -D @vitejs/plugin-react   # or @vitejs/plugin-vue, etc.\n```\n\nOptional bootstrap: `litestar assets init` scaffolds `vite.config.ts` + `package.json`.\n\n### Step 3: Wire ViteConfig (Python)\n\nDefine `ViteConfig` with `bundle_dir`, `resource_dir`, `hot_file`, `runtime` settings. Toggle `dev_mode` from an env var. Add to `Litestar(plugins=[VitePlugin(config=...)])`.\n\n### Step 4: Wire vite.config.ts (JS)\n\nAdd `litestar()` plugin with matching `input`, `bundleDir`, `hotFile`. Set `server.cors: true`, pin `server.port`, set `base` for prod CDN if needed.\n\n### Step 5: Enable Type Generation (optional)\n\nFor SPA / Inertia projects, set `types=TypeGenConfig(...)`. Re-run `litestar assets generate-types` whenever DTOs change. CI should fail if generated files are out of date.\n\n### Step 6: Wire Templates (template / HTMX modes)\n\nUse `vite_hmr()` and `vite()` in your base template.\nFor HTMX, register `HTMXPlugin()` and keep `ViteConfig(mode=\"template\", ...)`.\n\n### Step 7: Verify HMR\n\n`litestar run` → check the dev banner shows `Vite serving at http://localhost:5173`. Edit a frontend file → browser updates without reload. If it doesn't, check the troubleshooting list below.\n\n### Step 8: Build & Deploy\n\n`litestar assets build` in CI → ship `bundle_dir/` as static assets or push to CDN. Set `dev_mode=False` in production env.\n\n</workflow>\n\n<guardrails>\n\n## Guardrails\n\n- **`ViteConfig` paths and `vite.config.ts` paths are a single contract** — `bundle_dir`, `hot_file`, `resource_dir`, asset URL, `input` must agree. Mismatch breaks HMR or manifest resolution silently.\n- **Pin `server.port` in `vite.config.ts`** — auto-picked ports break the plugin's URL resolution.\n- **Set `server.cors: true`** when Litestar serves on a different origin than Vite in dev.\n- **Toggle `dev_mode` from env**, never hardcode `True` in committed code — leaving dev mode on in prod proxies to a non-existent dev server.\n- **Keep `RuntimeConfig.start_dev_server=True` in dev** so `litestar run` starts/stops Vite. For prod, set `dev_mode=False`.\n- **Commit generated types** OR regenerate in CI and check no diff — a drift between OpenAPI and `schemas.ts` is a runtime error.\n- **Never serve `manifest.json` with long-TTL caching** — frontend deploys depend on it being current.\n- **One `vite.config.ts` per frontend project** — multiple configs in one repo confuse the plugin's path resolution.\n- **Use `base` (Vite) / `assetUrl` (plugin)** for CDN deployments. Prefer env-driven values (`process.env.ASSET_URL`).\n- **Not for Webpack/Rollup/esbuild/Parcel** — `litestar-vite` integrates specifically with Vite's dev server protocol.\n\n</guardrails>\n\n<validation>\n\n### Validation Checkpoint\n\nBefore delivering a `litestar-vite` integration, verify:\n\n- [ ] Mode (`spa` / `template` / `hybrid` / `ssr` / `ssg` / `external`) is explicit\n- [ ] HTMX apps use `mode=\"template\"` with `HTMXPlugin()`\n- [ ] Inertia apps put `InertiaConfig` on `ViteConfig` and register one `VitePlugin`\n- [ ] `ViteConfig.paths.bundle_dir` and `vite.config.ts` `bundleDir` match\n- [ ] `ViteConfig.paths.hot_file` and `vite.config.ts` `hotFile` match\n- [ ] `dev_mode` is env-toggled\n- [ ] `server.port` is pinned in `vite.config.ts`\n- [ ] `server.cors: true` if Litestar and Vite are on different origins in dev\n- [ ] Template base file uses `vite_hmr()` before `vite(...)`\n- [ ] If `types=TypeGenConfig(...)`, generated types are committed or CI verifies they are up-to-date\n- [ ] Production build sets `dev_mode=False` and ships `manifest.json` + hashed bundles\n- [ ] CDN deploys set `base` / `assetUrl` from `ASSET_URL` env var\n- [ ] No competing Webpack/Rollup config in the same project\n\n</validation>\n\n<example>\n\n## Example\n\n**Task:** A Litestar SPA app with React + TanStack Router + Tailwind, building into the Litestar static dir, with HMR in dev.\n\n```python\n# app/config/vite.py\nimport os\nfrom pathlib import Path\n\nfrom litestar_vite import PathConfig, RuntimeConfig, ViteConfig\n\nPROJECT_ROOT = Path(__file__).resolve().parents[3]\nFRONTEND_ROOT = PROJECT_ROOT / \"src/js/web\"\nSTATIC_DIR = PROJECT_ROOT / \"src/py/app/server/static/web\"\n\nvite = ViteConfig(\n    paths=PathConfig(\n        root=FRONTEND_ROOT,\n        bundle_dir=STATIC_DIR,\n        hot_file=\"hot\",\n        asset_url=\"/static/web/\",\n    ),\n    runtime=RuntimeConfig(port=3006, executor=\"bun\", is_react=True),\n    dev_mode=os.getenv(\"ENV\", \"dev\") == \"dev\",\n)\n```\n\n```python\n# app/server/plugins.py\nfrom litestar_vite import VitePlugin\nfrom app import config\n\nvite = VitePlugin(config=config.vite)\n```\n\n```ts\n// src/js/web/vite.config.ts\nimport path from \"node:path\"\nimport tailwindcss from \"@tailwindcss/vite\"\nimport { tanstackRouter } from \"@tanstack/router-plugin/vite\"\nimport react from \"@vitejs/plugin-react\"\nimport litestar from \"litestar-vite-plugin\"\nimport { defineConfig } from \"vite\"\n\nexport default defineConfig({\n  clearScreen: false,\n  base: process.env.ASSET_URL ?? \"/static/web/\",\n  publicDir: \"public\",\n  server: { cors: true, port: Number(process.env.VITE_PORT ?? 3006) },\n  build: {\n    outDir: path.resolve(__dirname, \"../../py/app/server/static/web\"),\n    emptyOutDir: true,\n  },\n  plugins: [\n    tanstackRouter({ target: \"react\", autoCodeSplitting: true }),\n    tailwindcss(),\n    react(),\n    litestar({\n      input: [\"src/main.tsx\", \"src/styles.css\"],\n      bundleDir: path.resolve(__dirname, \"../../py/app/server/static/web\"),\n      hotFile: path.resolve(__dirname, \"../../py/app/server/static/web/hot\"),\n    }),\n  ],\n  resolve: { alias: { \"@\": path.resolve(__dirname, \"./src\") } },\n})\n```\n\n```bash\n# Dev — Litestar boots Vite alongside the ASGI server\nlitestar --app app:app run\n\n# Prod build\nENV=prod litestar assets build\n```\n\n</example>\n\n---\n\n## References Index\n\nFor deep-dives on specific surfaces, see:\n\n- **[Config](references/config.md)** — Full `ViteConfig`, `PathConfig`, `RuntimeConfig`, `TypeGenConfig`, and `vite.config.ts` reference.\n- **[Modes](references/modes.md)** — SPA / template / HTMX / Inertia / framework deep-dive with decision matrices.\n- **[TypeGen](references/typegen.md)** — Type generation pipeline, output reference, CI integration.\n- **[HMR](references/hmr.md)** — HMR architecture, debugging, common pitfalls.\n- **[Deployment](references/deployment.md)** — Production build, static hosting, CDN patterns, cache strategy.\n- **[Troubleshooting](references/troubleshooting.md)** — Common errors and fixes.\n\n## Cross-References\n\n- **[litestar](../litestar/SKILL.md)** — Litestar app + plugin lifecycle.\n- **[inertia](../litestar-inertia/SKILL.md)** — Inertia-specific frontend setup (paired with `hybrid` mode).\n- **[litestar-htmx](../litestar-htmx/SKILL.md)** — HTMX integration with Vite-bundled assets.\n\n## Official References\n\n- <https://vite.dev/guide/>\n- <https://vite.dev/config/>\n- <https://github.com/litestar-org/litestar-vite>\n- <https://litestar-org.github.io/litestar-vite/>\n- <https://litestar-org.github.io/litestar-vite/inertia/>\n- <https://www.npmjs.com/package/litestar-vite-plugin>\n\n## Shared Styleguide Baseline\n\n- Use shared styleguides for generic language/framework rules to reduce duplication in this skill.\n- [General Principles](../litestar-styleguide/references/general.md)\n- [TypeScript](../litestar-styleguide/references/typescript.md)\n- [Litestar](../litestar-styleguide/references/litestar.md)\n- Keep this skill focused on tool-specific workflows, edge cases, and integration details.","tags":["litestar","vite","skills","litestar-org","advanced-alchemy","agent-skills","agentskills","ai-agents","claude-code-plugin","claude-code-skills","gemini-cli-extension","htmx"],"capabilities":["skill","source-litestar-org","skill-litestar-vite","topic-advanced-alchemy","topic-agent-skills","topic-agentskills","topic-ai-agents","topic-claude-code-plugin","topic-claude-code-skills","topic-gemini-cli-extension","topic-htmx","topic-inertia","topic-litestar","topic-mcp","topic-python"],"categories":["litestar-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/litestar-org/litestar-skills/litestar-vite","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add litestar-org/litestar-skills","source_repo":"https://github.com/litestar-org/litestar-skills","install_from":"skills.sh"}},"qualityScore":"0.453","qualityRationale":"deterministic score 0.45 from registry signals: · indexed on github topic:agent-skills · 7 github stars · SKILL.md body (18,814 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-18T19:13:55.038Z","embedding":null,"createdAt":"2026-05-18T13:20:59.026Z","updatedAt":"2026-05-18T19:13:55.038Z","lastSeenAt":"2026-05-18T19:13:55.038Z","tsv":"'/)':57 '/../py/app/server/static/web':647,665 '/../py/app/server/static/web/hot':669 '/astro':24,425 '/generated/routes':825 '/generated/schemas':838 '/litestar-inertia/skill.md':485 '/litestar-org/litestar-fullstack)':593 '/package/litestar-vite-plugin)':146 '/resources':316 '/src':674 '/src/py/app/server/plugins.py':678 '/static':554 '/static/web':632 '123':832 '3006':642 '5173':260,558 '604':166 'activ':6 'adapt':789 'add':379 'added/changed':782 'agre':153 'alia':315,671 'alreadi':486 'analog':330,503 'analog-pow':329 'angular':332,427,498 'annot':179 'anoth':430 'api':338,414 'app':93,109,172,269,686,809,810,811 'asset':26,31,77,159,247,378,470,552,793,802 'astro':416,494 'astro.config.mjs':18,419 'attribut':387 'auto':5,849 'auto-activ':4 'auto-regist':848 'autocodesplit':654 'backend':64,339 'base':629 'bash':791 'break':209 'build':59,442,492,643 'builder':766 'built':246 'bun':564 'bundl':243,358,377,461,543,699 'bundledir':156,662 'canon':582 'chang':202,749,760,772 'clearscreen':301,627 'cli':428,499,790 'client':450,878 'client-sid':449 'code':161 'compon':395,479,773,836,841 'config':132,231,273,275,508,521,688,691 'config.vite':692,694 'configur':118,858 'connect':52 'const':826 'consum':170 'consumpt':819 'contract':201,717 'coordin':72,435 'cor':306,636 'coupl':200,716 'data':481 'decis':443 'default':299,625 'defineconfig':183,284,300,621,626 'dev':68,261,340,525,530,871 'dev-serv':67 'dev/build':432 'dev/prod':365 'dir':238,244,541,544,547,700,705 'dirnam':646,664,668,673 'driven':466 'dto':771 'emptyoutdir':648 'enabl':817 'end':81,83 'end-to-end':80 'engin':856 'env':266,535 'env-toggl':534 'exampl':505 'executor':563 'export':298,624,804 'export-rout':803 'extern':101,426,431,439,506 'fals':302,527,531,628 'file':251,550,702 'first':48 'first-parti':47 'framework':409 'frontend':37,58,189,240,742,818 'full':446 'fullstack':584,590,677 'fullstack-spa':583 'futur':177 'generat':29,85,418,567,570,573,576,719,722,725,728,731,795,800,813 'generate-typ':794 'get':830 'github.com':592 'github.com/litestar-org/litestar-fullstack)':591 'global':852 'handl':66,870 'handler':781 'helper':363,847,859 'hmr':27,71,875,877 'hmr/manifest':206 'host':559 'hot':250,252,549,551,701 'hotfil':157,256,666 'html':457 'htmx':103,369,382,465 'htmx-driven':464 'htmxplugin':111,368,472 'http':562 'hx':384 'hybrid':97,388,482 'hypermedia':370,467 'id':831 'import':10,178,220,225,283,287,294,420,514,596,601,605,609,613,620,683,687,822,834 'inertia':114,121,128,389,397,483,735,780,788 'inertia-pages.json':778 'inertia.js':390 'inertiaconfig':16,122,398 'inject':876 'input':155,311,659,869 'integr':129 'intern':127 'jinja':372 'jinja2':851 'jinja2/mako':353 'js':149,195,279,393,408,462,477,710 'js-side':709 'js/css':359 'json':337 'key':322 'land':248 'layer':112 'litestar':2,8,21,25,40,43,63,87,141,171,219,221,223,270,288,291,310,336,381,412,422,434,512,589,614,617,658,676,681,792,801,808 'litestar-fullstack':588,675 'litestar-htmx':380 'litestar-vit':1,39,42 'litestar-vite-plugin':20,140,290,421,616 'localhost':560 'ls':386 'manifest':73,346,873 'match':254 'may':174 'minim':212,276 'mode':102,108,182,233,262,317,319,341,523,526 'model':777 'modul':173 'msgspec':770 'must':152,253 'name':762 'need':445 'node':599 'none':169 'npm':138 'number':639 'nuxt':404,488 'one':116,186,715,798 'one-off':797 'openapi':88,747 'openapi.json':744 'option':79 'outdir':644 'output':580,737,739 'output/inertia-pages.json':779 'output/openapi.json':745 'output/routes.ts':757 'output/schemas.ts':768 'own':410,441 'packag':139 'page':354,394,478,577,732,784 'page-prop':783 'pair':135 'param':763 'parti':49 'path':235,537,597,600,706,740 'path.resolve':645,663,667,672 'pathconfig':13,226,236,517,538 'pattern':586 'pep':165 'per':188 'pipelin':60 'plugin':23,50,124,134,143,271,293,308,424,619,650 'port':259,557,638,641 'power':331 'process':433 'process.env.asset':630 'process.env.vite':640 'prod':348,533 'product':76,268 'project':190 'prop':578,733,785 'protocol':561 'provides/proxies':413 'proxi':70,343 'public':245,304,545,634 'publicdir':303,633 'pydant':769 'python':164,192,215,217,509,510,679,720 'quick':210 'rather':500 'react':295,309,325,610,653,657 'refer':92,211,696 'regist':850 'render':352,411,456,863 'resolut':74 'resolv':314,364,670 'resourc':237,239,540,704 'resources/main.css':313 'resources/main.ts':862 'resources/main.tsx':312 'return':392 'root':242,539 'rout':391,452,476,571,726,758,761,805,821,823,828 'route/schema':30 'routes.ts':756,806 'rule':163 'run':812 'runtim':257,555 'runtimeconfig':14,227,258,518,556 'schema':574,729,748,755,774,833,842 'schemas.ts':767 'script/link':864 'sdk':568,723,754 'see':484 'select':318 'server':69,305,351,455,474,635 'server-rend':350,454 'server-sid':473 'setup':214,278,323 'share':480 'side':150,216,280,451,475,711 'silent':208 'singl':199,401 'site':495 'skill' 'skill-litestar-vite' 'sourc':241,750 'source-litestar-org' 'spa':95,213,234,277,324,333,447,453,524,585 'sprinkl':360,458 'src':542 'src/generated':581,738 'src/js/web/vite.config.ts':594 'src/main.tsx':660 'src/public':548 'src/styles.css':661 'ssg':99,415,496 'ssr':98,403,407,491 'startup':815 'static':417,546 'strict':181 'style':162 'svelt':327 'sveltekit':406,490 'tabl':759 'tag':865 'tailwindcss':602,656 'tailwindcss/vite':604 'tanstack/router-plugin/vite':608 'tanstackrout':606,651 'target':652 'templat':96,107,349,362,367,373,463,471,846,855 'template-mod':106 'templateconfig':361 'togeth':204 'toggl':264,536 'tool':440 'topic-advanced-alchemy' 'topic-agent-skills' 'topic-agentskills' 'topic-ai-agents' 'topic-claude-code-plugin' 'topic-claude-code-skills' 'topic-gemini-cli-extension' 'topic-htmx' 'topic-inertia' 'topic-litestar' 'topic-mcp' 'topic-python' 'tree':444 'trigger':741 'true':263,307,342,528,569,572,575,579,637,649,655,724,727,730,734 'truth':752 'ts':281,595,820 'type':84,565,718,764,776,786,796,835,839 'typegenconfig':15,519,566,721 'typescript':90,180 'union':167 'url':160,366,553,631,765,827 'urls/types':436 'use':32,94,175,320,383,487,497,743,860 'user':775,829,840,843 'vite':3,9,22,36,41,44,54,142,185,224,230,274,286,292,345,357,376,423,460,469,504,513,520,618,623,682,689,861,868,874 'vite-bundl':356,375,459 'vite.config.ts':17,187,196,255,282,712 'vite.dev':56 'vite.dev/)':55 'viteassetload':844 'viteconfig':12,120,193,228,232,396,515,522,695 'vitejs/plugin-react':297,612 'viteplugin':11,117,229,272,402,507,516,684,690 'vs':872 'vue':326 'whenev':746 'wire':34,125 'www.npmjs.com':145 'www.npmjs.com/package/litestar-vite-plugin)':144","prices":[{"id":"2c235f32-2db3-4828-9dd7-fa14364c8ddb","listingId":"dbb4db3d-885e-4406-944a-54bc3706edd0","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"litestar-org","category":"litestar-skills","install_from":"skills.sh"},"createdAt":"2026-05-18T13:20:59.026Z"}],"sources":[{"listingId":"dbb4db3d-885e-4406-944a-54bc3706edd0","source":"github","sourceId":"litestar-org/litestar-skills/litestar-vite","sourceUrl":"https://github.com/litestar-org/litestar-skills/tree/main/skills/litestar-vite","isPrimary":false,"firstSeenAt":"2026-05-18T13:20:59.026Z","lastSeenAt":"2026-05-18T19:13:55.038Z"}],"details":{"listingId":"dbb4db3d-885e-4406-944a-54bc3706edd0","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"litestar-org","slug":"litestar-vite","github":{"repo":"litestar-org/litestar-skills","stars":7,"topics":["advanced-alchemy","agent-skills","agentskills","ai-agents","claude-code-plugin","claude-code-skills","gemini-cli-extension","htmx","inertia","litestar","mcp","python","sqlspec"],"license":"mit","html_url":"https://github.com/litestar-org/litestar-skills","pushed_at":"2026-05-13T16:04:09Z","description":"Opinionated first-party agent skills, plugins, subagents, slash commands, and MCP servers for the Litestar framework ecosystem — publishable to Claude Code, Gemini CLI, Codex CLI, Cursor, OpenCode, and VS Code/Copilot from a single repo.","skill_md_sha":"e63abb8bf8ac589ad78112cbff1e4bda6421f066","skill_md_path":"skills/litestar-vite/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/litestar-org/litestar-skills/tree/main/skills/litestar-vite"},"layout":"multi","source":"github","category":"litestar-skills","frontmatter":{"name":"litestar-vite","description":"Auto-activate for litestar_vite imports, VitePlugin, ViteConfig, PathConfig, RuntimeConfig, TypeGenConfig, InertiaConfig, vite.config.ts, astro.config.mjs with litestar-vite-plugin/astro, litestar assets, HMR, or generated route/schema assets. Use when wiring a Vite frontend with Litestar across SPA, template, HTMX/Jinja, Inertia, SSR, SSG, or external Angular CLI modes. Not for Webpack, Rollup, Parcel, or plain Vite outside Litestar."},"skills_sh_url":"https://skills.sh/litestar-org/litestar-skills/litestar-vite"},"updatedAt":"2026-05-18T19:13:55.038Z"}}