VueCraft NPM

Feature Toggles ​

Lightweight, backend-agnostic feature flags plugin for Vue 3 — boolean and multivariate flags, contextual rules, URL overrides, live updates, SSR hydration, a DevTools overlay, and a CLI — with a single peer dependency.

Features ​

  • FeatureToggles plugin — Vue plugin with static flags, async loader, polling interval, URL overrides, SSR state, and live updates in one app.use() call
  • <Feature> component — conditional rendering via default / fallback / loading slots; inverted mode; group checks; optional HTML wrapper tag
  • v-feature directive — v-show-style toggle (display: none) for single flags, inverted flags, or AND checks across multiple flags
  • useFeature — composable returning reactive Ref<boolean> per flag or Record<string, Ref<boolean>> for multiple flags
  • Multivariate flags — string variants for A/B tests and rollouts; useFeatureVariant composable; <FeatureVariant> with named slots per variant
  • useFeatureProvider — full low-level API: setFlag, resetFlag, reload, watchFlag, groups, profiles, variables, dependencies, expiry, and more
  • Contextual rules — reactive functions evaluated as flag sources; priority below URL overrides and setFlag, above loader and static
  • Percentage rollout — { value, rollout } flag definitions bucket users deterministically by userId, without a backend
  • Scheduling — activate or deactivate a flag automatically between two dates, independent of any manual override
  • URL overrides — query params override flags without a page reload; configurable prefix; works for boolean and variant flags and variables
  • Persistent overrides — setFlag(..., { persist: true })/setVariant(..., { persist: true }) saves to localStorage; survives page reloads; clearPersistedFlags() for cleanup
  • Override profiles — named sets of overrides stored in localStorage; switchable from the DevTools panel; useful for QA and demos
  • Flag groups — setGroup('beta', false) toggles a whole group at once; isGroupEnabled is true only when all members are on
  • Flag dependencies — dependent flag forced off when its required flag is disabled; violations exposed via getDependencyViolations()
  • Live updates — SSE or WebSocket push; server sends only changed flags; automatic reconnect
  • Flag metadata & expiry — description, owner, addedAt, ticket per flag; automatic date-based expiry with dev-console warnings
  • <FeatureDevTools> — floating overlay with Flags / Groups / History tabs; search, filter by source, per-flag controls, variable editor, profile switcher; draggable, collapsible
  • Vue DevTools integration — optional @vue/devtools-api; inspector tab and timeline layer; loads dynamically, silently skips when absent
  • Nuxt module — global component registration, composable auto-imports, automatic SSR hydration via nuxtApp.payload, $featureToggles injection, configFile for a function-valued loader/rules
  • Testing utilities — withFeatures, createTestFeatureProvider, setTestFlag, resetTestProvider; excluded from production bundle
  • Storybook addon — withFeatureToggles decorator with per-story parameters.featureToggles; excluded from production bundle
  • Adapter loaders — pre-built loaders for LaunchDarkly, Unleash, and Flagsmith
  • Vite plugin — strips <FeatureDevTools> from templates in production builds automatically
  • CLI — list, check, stale commands; reads config directly from source files; CI-safe exit codes
  • Full TypeScript — augment FeatureFlagNames interface for autocomplete and compile-time errors on flag names everywhere