Installation

Add Runable to your backend, create the Vue directory, then connect HTTP requests to the rendering engine.

Play Online

If you just want to try Runable in your browser without setting up a local project, use this online sandbox:

Prerequisites

Use a Node.js version supported by runable:

This page uses Express and TypeScript. The same principle applies to other backends.

Install dependencies

pnpm add runable vue vue-router express
pnpm add -D @runablejs/cli tsx typescript @types/node @types/express

npm install runable vue vue-router express
npm install --save-dev @runablejs/cli tsx typescript @types/node @types/express

yarn add runable vue vue-router express
yarn add --dev @runablejs/cli tsx typescript @types/node @types/express

bun add runable vue vue-router express
bun add --dev @runablejs/cli tsx typescript @types/node @types/express

Add scripts

Configure development, type preparation, and the production build:

{
  "type": "module",
  "scripts": {
    "dev": "tsx watch server.ts",
    "app:prepare": "runable prepare",
    "app:build": "runable build"
  }
}

runable prepare generates files required during development. runable build produces the application build. See CLI for the full command reference.

Create the configuration

Add runable.config.ts at the project root:

// runable.config.ts
import { defineConfig } from "runable";

export default defineConfig({
  ssr: true,
});

With this minimal configuration, Runable uses these conventions:

Create the first page

<!-- app/pages/index.vue -->
<template>
  <main>
    <h1>Hello Runable</h1>
    <p>This page is generated from app/pages/index.vue.</p>
  </main>
</template>

You do not need to declare the / route. Runable creates it from index.vue.

Connect Express to Runable

// server.ts
import Express from "express";
import { express } from "runable/adapters/express";

const server = Express();

server.get("/api/health", (_req, res) => {
  res.json({ status: "ok" });
});

// The adapter initializes Runable once and serves the frontend.
server.use(express());

server.listen(3000, () => {
  console.log("http://localhost:3000");
});

Place the Runable adapter after your API routes. /api/health remains handled by Express, while / is rendered by Vue.

The adapter calls createRunableApp() once. In development, it lets Vite respond to modules and assets before rendering the page.

Install only your backend

Supported frameworks are not runtime dependencies of runable. Install the one used by your application:

Start the project

pnpm dev

Open http://localhost:3000. The page should display “Hello Runable”.