Build the Interface
Load and Render
Extend Runable
Configure and Ship
Guide
Build, render, extend, and ship a Runable application.
This guide explains how to use Runable in a real application. Each page starts from a concrete need and shows the code to write.
Build the interface
Start here to organize page navigation and display.
| Need | Page |
|---|---|
| Turn Vue files into routes | Routing |
| Share a structure across pages | Layouts |
| Control navigation | Middleware |
| Display and reset an error | Error handling |
Load and render
These pages cover data, SSR, and HTML metadata.
| Need | Page |
|---|---|
| Load data with caching and hydration | Data Fetching |
| Choose between SSR and CSR | SSR and CSR |
| Define titles, SEO, and structured data | Head and SEO |
Extend Runable
Use auto-imports for application code, plugins to initialize Vue, and modules to distribute a complete set of conventions.
| Scope | Solution |
|---|---|
| A reusable function or component | Auto-imports |
| Initialization tied to the Vue application | Plugins |
| A configurable, distributable feature | Modules |
Configure and ship
Finish with runtime configuration, styles and assets, then the production build.
Work with AI coding agents
Runable provides two complementary ways to give an agent reliable framework context.
| Need | Page |
|---|---|
| Install task-specific Runable instructions | AI Skills |
| Give an agent a live view of the project | Runable MCP |
| Inspect the resolved project from TypeScript | Inspector |
Guide or API reference?
Use the Guide to learn a complete workflow. Use the API section when you need the exact signature of a composable, component, or global.
On this page