Introduction

Quick Start

How to get started with mion full stack APIs.

mion has three starter projects that set up a fully typed frontend and backend in one step. Each keeps the mion API in its own api/ package, so you can deploy the frontend and the API independently.

npm create @mionjs/starter-vue my-app

npm create @mionjs/starter-nuxt my-app

npm create @mionjs/starter-nextjs my-app

Vue Starter

A Vue 3 SPA + Vite starter with a standalone mion API.

Vue Router
api/ package with build targets for Node, Bun, Vercel and Cloudflare Workers
Fully typed @mionjs/client wired to the local API
mion Vite plugin
Vitest + Playwright e2e tests preconfigured

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)

Nuxt Starter

A Nuxt 4 starter with mion as a standalone API beside the Nuxt app.

Nuxt 4 with SSR enabled (use nuxt generate for static output)
api/ package with build targets for Node, Bun, Vercel and Cloudflare Workers
Fully typed @mionjs/client available in pages, components, and composables
mion Vite plugin wired through Nuxt's Vite config
Playwright e2e tests preconfigured

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)

Next.js Starter

A Next.js 16 + React 19 starter where the Next app hosts the mion API itself.

Tailwind CSS 4
api/ package with build targets for Node, Bun and Vercel
A catch-all route handler at app/api/[...mion]/route.ts serves the API in dev and production
One app, one program, one deployment
Fully typed @mionjs/client usable from server and client components
withMion in next.config.ts, and the mion Vite plugin for the api/ builds
@mionjs/drizzle-orm-pg-core integration and Playwright e2e tests preconfigured

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
│   └── 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
│   │   ├── 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 (withMion)

All starters compile validation and the JSON round trip at build time, for faster cold starts: the Vue and Nuxt starters with the mion Vite plugin, the Next.js starter with withMion. To deploy where runtime new Function() is blocked, set emitMode: 'both'.