🛠️ Vue DevTools

Custom inspector for viewing deployed outposts. Enabled automatically in development.

⚡ Enabling DevTools

const citadel = createNavigationCitadel(router);
app.use(citadel); // DevTools enabled automatically (default: __DEV__)

Disable DevTools:

const citadel = createNavigationCitadel(router, { devtools: false });

When devtools: false, devtools code is tree-shaken from the bundle via dynamic import.

Option	Type	Default	Description
devtools	boolean	__DEV__	Enable Vue DevTools custom inspector

🔍 Inspector Features

The custom inspector has three sections:

Outposts

Tree view of all deployed outposts grouped by scope (Global / Route).

• Tags — Each outpost shows priority badge, hooks count, and lazy badge if applicable
• State panel — Detailed view with name, scope, priority, hooks array, timeout value, lazy status

Route Assignments

Shows routes that have meta.outposts assigned. Each route node displays its assigned outpost names as a tag.

• State panel — Route name, path, and outposts array

Current Route

Shows outposts that will execute on the current route, in patrol() execution order: all global outposts first (by priority), then route outposts (by priority).

• Tags — Each outpost shows scope badge (global / route) and priority
• Auto-updates — Refreshes automatically on navigation via router.afterEach

Auto-refresh

Inspector updates automatically on:

• Deploy/abandon — outpost changes
• Navigation — current route changes

⚙️ Settings Panel

The DevTools settings panel provides runtime control of logging and debug modes.

Log Level Selector

Option	log	debug	Description
Off	false	false	No logging
Log	true	false	Non-critical logging enabled
Log + Debug	true	true	Logging + debug breakpoints

Settings persist in localStorage and take priority over citadel options on next page load. See DevTools Internals for the full resolution flow and localStorage details.

See Logging & Debug for all log events, custom logger, and debug breakpoints reference.

Diagram Legend

Color	Meaning
🟢	Success, ALLOW, continue
🟡	Warning, redirect, deduplicate
🔴	Error, BLOCK, cancel
🔵	Logging (when logger is enabled)
🟣	Named debug breakpoint (debug: true)