Runable v1.0.0-alpha.20
Why Runable? Docs Modules Work with AI Blog About Changelog
  • 01Why Runable?
  • 02Docs
  • 03Modules
  • 04Work with AI
  • 05Blog
  • 06About
  • 07Changelog
Vue without a fixed server runtime.
Getting Started Structure Integrations Guide MCP API
  • Getting Started Structure Integrations Guide MCP API
      .output.apptsconfig.app.jsonapppageslayoutscomponentscomposablesglobalspluginsmiddlewarescssapp.vueerror.vuemodulesnode_modulespublic.env.gitignorerunable.config.tsserver.tspackage.jsontsconfig.jsontsconfig.node.json

app/pages

Create Vue routes from the file tree.

Every Vue component in app/pages/ becomes a route. Its file path determines the URL.

app/pages/
├── index.vue             → /
├── about.vue             → /about
├── users/[id].vue        → /users/:id
└── docs/[...slug].vue    → /docs/:slug*

Create a page like a regular Vue component:

<!-- app/pages/users/[id].vue -->
<script setup lang="ts">
const route = useRoute();
</script>

<template>
  <h1>User {{ route.params.id }}</h1>
</template>

Add a layout or middleware with definePageMeta():

definePageMeta({
  layout: "dashboard",
  middleware: ["auth"],
});

Runable delegates page detection and reloading to Vue Router. Configure pages in runable.config.ts only when your views live elsewhere.

Report an issue Edit this page
app

Organize your Vue application sources in the app directory.

layouts

Share an interface structure across several pages.

Runable

The Vue framework that brings productive conventions to any backend.

Product

  • Why Runable
  • Documentation
  • Installation
  • Integrations

Project

  • About
  • Blog
  • Changelog
  • Sponsor

Community

  • GitHub
  • Issues
  • Discussions
  • Bluesky

© 2026 Runable. Released under the MIT License.

Open source Built with Vue and Runable