Why Runable?

Get a Nuxt-like experience in Vue while keeping the backend and HTTP server of your choice.

Runable brings full-stack framework conventions to Vue without imposing a specific server runtime.

The problem

Vue and Vite provide a simple, flexible foundation. As an application grows, you still have to select, integrate, and maintain several pieces:

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.

HTTP request
    │
    ▼
Your backend ──────► API routes and application logic
    │
    └───────────────► Runable ──► Vue application

Your server forwards frontend requests to Runable:

// 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);

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

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.

Next step

Install the required dependencies in Installation.

Report an issue Edit this page

On this page