a router and conventions for organizing pages;
layouts, middleware, and auto-imports;
server rendering, hydration, and data loading;
a reusable plugin and module system.
Nuxt already provides this experience, but relies on Nitro for its server layer. That choice suits many projects, but not those that must keep Express, Fastify, NestJS, AdonisJS, Koa, Hono, or an internal HTTP server.
Without a middle ground, you usually choose between two architectures:
| Choice | Advantage | Trade-off |
| --- | --- | --- |
| Vue and Vite alone | Complete server control | Conventions and features must be assembled manually |
| Separate backend and Nuxt frontend | Complete Nuxt experience | Two applications to build, connect, and deploy |
## What Runable changes
Runable places a Vue application layer inside your existing server. Your backend continues to handle HTTP, API routes, authentication, and application logic. Runable renders the interface.
```text
HTTP request
│
▼
Your backend ──────► API routes and application logic
│
└───────────────► Runable ──► Vue application
```
Your server forwards frontend requests to Runable:
```ts
// server.ts
import Express from "express";
import { express } from "runable/adapters/express";
const server = Express();
// Your backend remains responsible for its API routes.
server.get("/api/health", (_req, res) => {
res.json({ status: "ok" });
});
// The adapter initializes Runable and renders other requests with Vue.
server.use(express());
server.listen(3000);
```
::u-tip
---
variant: info
title: An additive integration
---
You do not need to rewrite your backend. Add Runable where your server should render the Vue application.
::
## What Runable provides
| Feature | Convention or API |
| --- | --- |
| File-system routing | `app/pages/` |
| Layouts | `app/layouts/` |
| Auto-imported components and composables | `app/components/` and `app/composables/` |
| Navigation middleware | `app/middlewares/` and `definePageMeta()` |
| Data loading | `useAsyncData()` |
| SSR and hydration | Server rendering and client cache restoration |
| Application plugins | `defineVuePlugin()` |
| Configurable modules | `defineModule()` |
This separation lets you choose a backend for its own capabilities without rebuilding the entire frontend developer experience.
## When should you choose Runable?
Runable is a good fit when:
you already have a production backend;
your team relies on that backend's conventions, plugins, or tools;
you want SSR and Nuxt-like organization in the same application;
you need control over the server lifecycle and deployment.
Another choice may be simpler in these cases:
| Need | Consider |
| --- | --- |
| An integrated solution with its own server runtime | Nuxt |
| A lightweight SPA without SSR or extra conventions | Vue and Vite |
| A frontend completely independent from the backend | Two separate applications |
::u-tip
---
variant: warning
title: Alpha project
---
Runable is currently in alpha. Check the availability of features your application depends on before using it in production.
::
## Key takeaway
Runable does not replace your backend. It adds a structured Vue application that can render on the server or client, with ready-to-use conventions.
::u-tip
---
variant: info
title: Next step
---
Install the required dependencies in