VueCraft NPM

DevTools ​

<FeatureDevTools> panel ​

A floating overlay for inspecting and controlling flags at runtime.

vue
<script setup>
import { FeatureDevTools } from 'vue-feature-toggles'
const isDev = import.meta.env.DEV
</script>

<template>
  <RouterView />
  <FeatureDevTools v-if="isDev" />
</template>

The panel is organized into three tabs, each with its own content and action buttons.

Flags tab ​

The default view — lists every known flag with full controls.

  • Search by flag name and filter by source (url, runtime, rules, loader, static, default)
  • Each row shows: flag name, source badge, value badge, and contextual inline badges:
    • ⚠ — flag has passed its expiry date
    • ⛓ — dependency violation (a required flag is disabled)
    • 💾 — override is persisted to localStorage
    • ℹ — metadata available (hover for description, owner, ticket, addedAt)
  • Toggle boolean flags on/off with a single click
  • Edit variant — click the variant badge to edit inline; confirm with Enter or ✓
  • Reset any individual runtime or URL override back to its original source
  • Variables — flags with variables configured show a ▸ N expand button; click to reveal per-variable inputs
  • Footer actions: Reset all · Reload from loader · Copy URL · Export overrides as JSON · Import overrides from JSON
  • Profiles — if saved profiles exist, a dropdown lets you switch between them instantly

Groups tab ​

Shows every group defined in the groups option.

  • Each group row displays: group name, N/M enabled counter, ALL ON / PARTIAL status badge, and ON / OFF / reset buttons
  • Member flags shown as colored chips (green = enabled, grey = disabled)
  • Footer: Reset all groups

History tab ​

A chronological log of the last 20 flag changes recorded during the session.

  • Each entry shows: timestamp, flag name, source badge, new value badge
  • Footer: Clear

General ​

  • Draggable — drag by the header; viewport-clamped; position saved in sessionStorage
  • Collapsible — collapse to a title bar with the chevron button

Vue DevTools integration ​

A custom inspector tab and timeline layer appear in the browser Vue DevTools extension when @vue/devtools-api is installed.

bash
npm install --save-dev @vue/devtools-api

The integration is optional — the plugin loads it dynamically and silently skips it when the package is absent or DevTools are closed.

  • Inspector — all flags with value and source badges, full metadata in the detail pane
  • Timeline — every flag change is logged with previous value, new value, and source

No configuration needed — the integration activates automatically in dev mode.