Vue-Feature-Toggle, currently at stable version 3.0.0, is a specialized Vue.js component library designed to implement feature toggles and variants directly within your Vue templates. It offers a declarative way to conditionally render content based on configurable feature flags. The package integrates with and implements the core logic of the `feature-toggle-api` (v3.4.1), abstracting away the underlying mechanism for managing feature states. This approach separates view logic from feature configuration, allowing non-developers to control feature availability and rollouts, facilitating A/B testing and phased deployments without code changes. The library supports both Vue 2.x and Vue 3.x via its peer dependencies and ships with TypeScript types, enhancing development experience. Unlike imperative, code-centric feature flagging solutions, Vue-Feature-Toggle provides a `<feature>` component for direct use in your markup.
npm install vue-feature-toggleVerified import paths — ran on the pinned version, not inferred.
This quickstart demonstrates how to set up and use the `<Feature>` component in a Vue 3 application. It shows global feature flag configuration using `setFlag` and conditional rendering of content based on these flags, including usage of variants and data attributes.
Review the official Vue 3 migration guide for core Vue changes. For `vue-feature-toggle`, ensure proper component import (e.g., `import Feature from 'vue-feature-toggle'`) or plugin registration (`app.use(featureTogglePlugin)`). Refer to the `vue-feature-toggle` examples for Vue 3 specific usage.
Change `data="my-string-value"` to `:data="'my-string-value'"` for strings, or `data="{ key: 'value' }"` to `:data="{ key: 'value' }"` for objects, and similarly for numbers or booleans.Use `import { showLogs } from 'vue-feature-toggle'; showLogs();` in your application's entry point or component to gain insight into how features are being evaluated. Consult the `feature-toggle-api` documentation for advanced configuration, such as defining custom rules or plugins.In `<script setup>`, ensure `import Feature from 'vue-feature-toggle'` is present. If using Options API, ensure `components: { Feature }` is declared in your component, or globally register the component with `app.component('Feature', Feature)` in your `main.ts`.Ensure you are using Vue's prop binding syntax (`:data="{ message: '...' }"`) instead of a static attribute (`data="{ message: '...' }"`) when passing non-string data types to the `data` prop of the `<Feature>` component.Add `import { setFlag } from 'vue-feature-toggle'` to the file where you are trying to use `setFlag` to configure your feature flags.Verify that `setFlag('featureName', true)` or `setFlag('featureName', 'variantName')` is called with the exact `name` and `variant` matching your `<Feature>` component usage. Use `showLogs()` to inspect the feature evaluation process for debugging.