mion offers 3 starter projects that scaffold a fully typed frontend + backend setup in one step. Each starter keeps the mion API as an independent package under api/ so it can be deployed to any serverless platform (Node, Bun, Vercel, Cloudflare) while the frontend ships as a separate app.
Pick a starter and run the corresponding npm create command:
npm create @mionjs/starter-vue my-app
npm create @mionjs/starter-nuxt my-app
npm create @mionjs/starter-nextjs my-app
A Vue 3 SPA + Vite starter with a standalone mion API.
npm create @mionjs/starter-vue my-app
What's included:
api/ package with build targets for Node, Bun, Vercel and Cloudflare Workers@mionjs/client wired to the local APItsconfig.json with reflection: true for runtime type metadataaotCaches: true for AOT compilationDirectory structure:
my-app/
├── app/ # Vue 3 SPA source
│ ├── pages/ # Route views
│ ├── composables/ # Shared Vue composables
│ ├── mion-client.ts # Typed mion client wired to the API
│ ├── router.ts # Vue Router setup
│ └── main.ts # SPA entry
├── api/ # Standalone mion API package
│ ├── src/
│ │ ├── api.ts # Route registry + initApi()
│ │ ├── models.ts # Shared API models
│ │ ├── features/ # Feature modules (handlers, models, repos)
│ │ ├── server.node.ts # Node.js entry
│ │ ├── server.bun.ts # Bun entry
│ │ ├── vercel-serverless.ts
│ │ └── cloudflare-worker.ts
│ └── vite.config.ts # mion Vite plugin + multi-target build
├── e2e/ # Playwright tests
└── vite.config.ts # Frontend Vite config (loads mion plugin)
A Nuxt 4 starter with SSR enabled and mion served as a standalone API alongside the Nuxt app.
npm create @mionjs/starter-nuxt my-app
What's included:
nuxt generate for static output)api/ package with build targets for Node, Bun, Vercel and Cloudflare Workers@mionjs/client available in pages, components, and composablestsconfig.json with reflection: true for runtime type metadataaotCaches: true for AOT compilationDirectory structure:
my-app/
├── app/ # Nuxt app source
│ ├── pages/ # File-based routes
│ ├── composables/ # Composables (includes mion client)
│ ├── plugins/ # Nuxt plugins
│ └── app.vue # Root component
├── api/ # Standalone mion API package
│ ├── src/
│ │ ├── api.ts # Route registry + initApi()
│ │ ├── models.ts # Shared API models
│ │ ├── features/ # Feature modules (handlers, models, repos)
│ │ ├── server.node.ts # Node.js entry
│ │ ├── server.bun.ts # Bun entry
│ │ ├── vercel-serverless.ts
│ │ └── cloudflare-worker.ts
│ ├── mion-plugin.ts # Shared mion Vite plugin factory
│ └── vite.config.ts # Standalone API build
├── e2e/ # Playwright tests
└── nuxt.config.ts # Nuxt config (loads the mion plugin via Vite)
A Next.js 16 + React 19 starter where the mion API runs alongside the Next app.
npm create @mionjs/starter-nextjs my-app
What's included:
api/ package with build targets for Node, Bun and Vercelvite-node server on port 3001 and Next proxies /api/mion/* to itapp/api/[...mion]/route.ts serves the API@mionjs/client usable from server and client componentstsconfig.json with reflection: true for runtime type metadataaotCaches: true for AOT compilation@mionjs/drizzle integration and Playwright e2e tests preconfiguredDirectory structure:
my-app/
├── app/ # Next.js app router
│ ├── page.tsx # Home page
│ ├── layout.tsx # Root layout
│ ├── mion-orders/ # Example feature page
│ ├── api/
│ │ └── [...mion]/ # Catch-all route handler for prod
│ └── globals.css
├── api/ # Standalone mion API package
│ ├── src/
│ │ ├── api.ts # Route registry + initApi()
│ │ ├── models.ts # Shared API models
│ │ ├── features/ # Feature modules (handlers, models, repos)
│ │ ├── db/ # Drizzle schema and client
│ │ ├── dev-server.ts # vite-node dev server (proxied by Next)
│ │ ├── server.node.ts # Node.js entry
│ │ ├── server.bun.ts # Bun entry
│ │ └── vercel-serverless.ts
│ ├── drizzle.config.ts # Drizzle migrations config
│ └── vite.config.ts # mion Vite plugin + multi-target build
├── e2e/ # Playwright tests
└── next.config.ts # Next config (dev proxy + Turbopack aliases)
aotCaches: true) so validation and serialization functions are precompiled at build time — enabling deployment to locked-down environments and faster cold starts.