Skip to content

CLI, Adapters & Vite Plugin

CLI

bash
npx vue-feature-toggles <command> [options]

The CLI reads configuration directly from your source files — no separate config file needed. It scans for app.use(FeatureToggles, { ... }) and statically extracts flags, meta, expiry, groups, and dependencies.

ts
// main.ts — the CLI reads this automatically
app.use(FeatureToggles, {
  flags: { newDashboard: true, betaSearch: false, checkoutFlow: 'v1' },
  meta: { newDashboard: { owner: 'alice', addedAt: '2024-01-15', ticket: 'PROJ-42' } },
  expiry: { betaBanner: '2025-06-01' },
  groups: { beta: ['betaSearch'] },
  // rules, loader — dynamic, not parsed by CLI
})

If you need an explicit override (e.g. in a monorepo), create feature-toggles.config.js in the project root — it takes priority over source scanning:

js
// feature-toggles.config.js  (optional explicit override)
export default {
  flags: { newDashboard: true, betaSearch: false },
  meta: { newDashboard: { owner: 'alice', addedAt: '2024-01-15' } },
}

list — show all flags

bash
npx vue-feature-toggles list

Prints an aligned table with flag name, value, source, owner, addedAt, expiry badge, and group membership.

Flag             Value  Source  Owner      Added       Expiry     Groups
──────────────────────────────────────────────────────────────────────────
newDashboard     true   static  frontend   2025-01-15             layout
betaSearch       false  static  search-…   2025-06-01             beta
checkoutFlow     v1     static  checkout   2025-09-01
christmasBanner  true   static  marketing  2024-11-01  [EXPIRED]

check — find unknown flag references

bash
npx vue-feature-toggles check
npx vue-feature-toggles check ./src/features
npx vue-feature-toggles check --src src/features

Scans .ts, .tsx, .js, .jsx, .vue files for useFeature(...), v-feature="...", isEnabled(...) calls. Lists each found reference — ✅ known, ❌ unknown with "did you mean?" suggestion. Exits with code 1 on unknown references — safe for CI.

✅ newDashboard
✅ betaSearch
❌ newCheckout  — unknown flag. Did you mean: checkoutFlow?

stale — find flags overdue for cleanup

bash
npx vue-feature-toggles stale
npx vue-feature-toggles stale --months 6

Reports boolean true flags whose meta.addedAt is older than --months (default: 3). These are candidates for removal — the feature has been live long enough that the flag is dead code.

Global options

OptionDefaultDescription
--config <path>(scan source files)Explicit config file override
--root <path>.Project root directory
--src <path>src (check only)Source directory to scan
--months <n>3 (stale only)Age threshold in months

Adapter loaders

Pre-built loaders for common flag management services, imported from vue-feature-toggles/adapters.

ts
import { launchDarklyLoader, unleashLoader, flagsmithLoader } from 'vue-feature-toggles/adapters'

LaunchDarkly

ts
app.use(FeatureToggles, {
  loader: launchDarklyLoader({
    clientSideId: 'your-client-side-id',
    user: { key: userId },
  }),
})

Unleash

ts
app.use(FeatureToggles, {
  loader: unleashLoader({
    url: 'https://unleash.example.com/api',
    appName: 'my-app',
    clientKey: 'default:development.abc123',
    userId, // optional — adds UNLEASH-INSTANCEID header
  }),
})

Flagsmith

ts
app.use(FeatureToggles, {
  loader: flagsmithLoader({
    apiKey: 'ser.your-api-key',
    identity: userId, // optional — enables per-user evaluation
  }),
})

Vite plugin

Automatically strips <FeatureDevTools> and its import from all source files during production builds — no v-if="isDev" wrapper needed.

ts
// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { featureTogglesPlugin } from 'vue-feature-toggles/vite'

export default defineConfig({
  plugins: [vue(), featureTogglesPlugin()],
})
OptionDefaultDescription
stripDevToolstrueRemove <FeatureDevTools> from templates in prod