{"id":15907,"library":"vue-feature-toggle","title":"Vue Feature Toggle","description":"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.","status":"active","version":"3.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/bassdman/vue-feature-toggle","tags":["javascript","vuejs","feature-flag","feature","vue","feature toggle","variant","typescript"],"install":[{"cmd":"npm install vue-feature-toggle","lang":"bash","label":"npm"},{"cmd":"yarn add vue-feature-toggle","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-feature-toggle","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for Vue.js applications (supports v2.x and v3.x).","package":"vue","optional":false},{"reason":"Core logic for feature flag management, implemented internally by vue-feature-toggle.","package":"feature-toggle-api","optional":false}],"imports":[{"note":"The main component is exported as the default export. Use this when importing directly into a Single File Component's script setup.","wrong":"import { Feature } from 'vue-feature-toggle'","symbol":"Feature","correct":"import Feature from 'vue-feature-toggle'"},{"note":"For programmatic control over feature flags, `setFlag` (and other utility functions) are re-exported directly from `vue-feature-toggle` for convenience, rather than importing from the underlying `feature-toggle-api`.","wrong":"import { setFlag } from 'feature-toggle-api'","symbol":"setFlag","correct":"import { setFlag } from 'vue-feature-toggle'"},{"note":"For global registration and configuration in a Vue 3 application, `app.use()` is the correct method. `Vue.use()` is for Vue 2 and `Feature` itself is a component, not a plugin.","wrong":"import { Feature } from 'vue-feature-toggle';\nVue.use(Feature);","symbol":"Vue Feature Toggle Plugin (Global)","correct":"import featureTogglePlugin from 'vue-feature-toggle';\napp.use(featureTogglePlugin, { /* config */ });"}],"quickstart":{"code":"import { createApp, defineComponent } from 'vue';\nimport Feature, { setFlag, showLogs } from 'vue-feature-toggle';\n\n// Configure feature flags globally\nsetFlag('feature1', true);\nsetFlag('feature2', true);\nsetFlag('feature3', true);\nsetFlag('testmode', true);\nsetFlag('shop', 'de'); // Example for variant-like flag\n\n// Enable logging for debugging\nshowLogs();\n\nconst App = defineComponent({\n  components: { Feature },\n  template: `\n    <div>\n      <h1>Vue Feature Toggle Example (v3)</h1>\n      <p>Features configured using setFlag in main.ts.</p>\n\n      <Feature name=\"feature1\">\n        <p>This is \"Feature1\" and is currently enabled.</p>\n      </Feature>\n      \n      <Feature name=\"feature2\">\n        <p>This is \"Feature2\" (enabled by default).</p>\n      </Feature>\n\n      <Feature name=\"feature2\" variant=\"new\">\n        <p>This is \"Feature2\" with variant \"new\".</p>\n      </Feature>\n\n      <Feature name=\"feature2\" variant=\"old\">\n        <p>This \"Feature2\" with variant \"old\" is hidden because no 'old' variant is set.</p>\n      </Feature>\n\n      <Feature name=\"feature3\" :data=\"{ message: 'Custom data for feature 3' }\" v-slot=\"{ data }\">\n        <p>This \"Feature3\" passes some data: {{ data.message }}</p>\n      </Feature>\n\n      <Feature name=\"testmode\">\n        <p><strong>Test Mode Active:</strong> Showing debugging information.</p>\n      </Feature>\n\n      <Feature name=\"shop\" variant=\"de\">\n        <p>Welcome to the German Shop!</p>\n      </Feature>\n\n      <Feature name=\"shop\" variant=\"en\">\n        <p>Welcome to the English Shop! (Hidden by current config)</p>\n      </Feature>\n    </div>\n  `,\n});\n\nconst app = createApp(App);\napp.mount('#app');\n","lang":"typescript","description":"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."},"warnings":[{"fix":"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.","message":"Version 3.0.0 of `vue-feature-toggle` introduces compatibility with Vue 3. While the peer dependencies technically support Vue 2.x, upgrading from a prior major version of `vue-feature-toggle` in a Vue 2 project, or migrating a Vue 2 project to Vue 3, may encounter breaking changes related to Vue's core API shifts (e.g., `Vue.use()` to `app.use()` for plugins, global API changes, component registration differences).","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"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.","message":"When passing data to the `<Feature>` component, always use Vue's `:data` binding syntax (`:data=\"{ key: value }\"`) instead of a static `data` attribute (`data=\"{ key: value }\"`). Using `data` will pass the value as a plain string, while `:data` ensures it's treated as a JavaScript object or other primitive.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"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.","message":"While `vue-feature-toggle` simplifies usage, its core logic depends on `feature-toggle-api`. Debugging feature visibility issues often requires understanding how `feature-toggle-api` is configured and how it evaluates flags. The package exposes `showLogs()` for detailed output.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"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`.","cause":"The `Feature` component was not correctly imported or registered in your Vue application.","error":"[Vue warn]: Failed to resolve component: Feature"},{"fix":"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.","cause":"You are trying to access properties on the `data` prop, but it was passed as a string instead of an object.","error":"Property 'message' does not exist on type 'string'."},{"fix":"Add `import { setFlag } from 'vue-feature-toggle'` to the file where you are trying to use `setFlag` to configure your feature flags.","cause":"The `setFlag` utility function was not imported correctly.","error":"ReferenceError: setFlag is not defined"},{"fix":"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.","cause":"The feature flag is not configured as expected by the underlying `feature-toggle-api`, or the `name`/`variant` props do not match the configured flags.","error":"Content wrapped in <Feature> tag is always hidden/shown incorrectly."}],"ecosystem":"npm"}