# 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 | <a href="/docs/guide/routing.md">Routing</a> |
| Share a structure across pages | <a href="/docs/guide/layouts.md">Layouts</a> |
| Control navigation | <a href="/docs/guide/middlewares.md">Middleware</a> |
| Display and reset an error | <a href="/docs/guide/error-handling.md">Error handling</a> |

## Load and render

These pages cover data, SSR, and HTML metadata.

| Need | Page |
| --- | --- |
| Load data with caching and hydration | <a href="/docs/guide/data-fetching.md">Data Fetching</a> |
| Choose between SSR and CSR | <a href="/docs/guide/rendering-modes.md">SSR and CSR</a> |
| Define titles, SEO, and structured data | <a href="/docs/guide/head-and-seo.md">Head and SEO</a> |

## 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 | <a href="/docs/guide/auto-imports.md">Auto-imports</a> |
| Initialization tied to the Vue application | <a href="/docs/guide/plugins.md">Plugins</a> |
| A configurable, distributable feature | <a href="/docs/guide/modules.md">Modules</a> |

## Configure and ship

Finish with <a href="/docs/guide/runtime-config.md">runtime configuration</a>, <a href="/docs/guide/css-and-assets.md">styles and assets</a>, then the <a href="/docs/guide/production-build.md">production build</a>.

## Work with AI coding agents

Runable provides two complementary ways to give an agent reliable framework context.

| Need | Page |
| --- | --- |
| Install task-specific Runable instructions | <a href="/docs/guide/cli/skills.md">AI Skills</a> |
| Give an agent a live view of the project | <a href="/docs/mcp/index.md">Runable MCP</a> |
| Inspect the resolved project from TypeScript | <a href="/docs/guide/inspector.md">Inspector</a> |

::u-tip
---
variant: info
title: 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.

::