Vue Feature Toggle

Common errors

• [Vue warn]: Failed to resolve component: Feature

  cause The `Feature` component was not correctly imported or registered in your Vue application.
  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`.

• Property 'message' does not exist on type 'string'.

  cause You are trying to access properties on the `data` prop, but it was passed as a string instead of an object.
  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.

• ReferenceError: setFlag is not defined

  cause The `setFlag` utility function was not imported correctly.
  fix Add `import { setFlag } from 'vue-feature-toggle'` to the file where you are trying to use `setFlag` to configure your feature flags.

• Content wrapped in <Feature> tag is always hidden/shown incorrectly.

  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.
  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.

Warnings

• breaking 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).
  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.
• gotcha 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.
  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.
• gotcha 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.
  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.

Install

• npm install vue-feature-toggle npm
• yarn add vue-feature-toggle yarn
• pnpm add vue-feature-toggle pnpm

Imports

• Feature
  wrong:

  import { Feature } from 'vue-feature-toggle'

  correct:

  import Feature from 'vue-feature-toggle'

  The main component is exported as the default export. Use this when importing directly into a Single File Component's script setup.
• setFlag
  wrong:

  import { setFlag } from 'feature-toggle-api'

  correct:

  import { setFlag } from 'vue-feature-toggle'

  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`.
• Vue Feature Toggle Plugin (Global)
  wrong:

  import { Feature } from 'vue-feature-toggle';
  Vue.use(Feature);

  correct:

  import featureTogglePlugin from 'vue-feature-toggle';
  app.use(featureTogglePlugin, { /* config */ });

  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.

Quickstart

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.

import { createApp, defineComponent } from 'vue';
import Feature, { setFlag, showLogs } from 'vue-feature-toggle';

// Configure feature flags globally
setFlag('feature1', true);
setFlag('feature2', true);
setFlag('feature3', true);
setFlag('testmode', true);
setFlag('shop', 'de'); // Example for variant-like flag

// Enable logging for debugging
showLogs();

const App = defineComponent({
  components: { Feature },
  template: `
    <div>
      <h1>Vue Feature Toggle Example (v3)</h1>
      <p>Features configured using setFlag in main.ts.</p>

      <Feature name="feature1">
        <p>This is "Feature1" and is currently enabled.</p>
      </Feature>
      
      <Feature name="feature2">
        <p>This is "Feature2" (enabled by default).</p>
      </Feature>

      <Feature name="feature2" variant="new">
        <p>This is "Feature2" with variant "new".</p>
      </Feature>

      <Feature name="feature2" variant="old">
        <p>This "Feature2" with variant "old" is hidden because no 'old' variant is set.</p>
      </Feature>

      <Feature name="feature3" :data="{ message: 'Custom data for feature 3' }" v-slot="{ data }">
        <p>This "Feature3" passes some data: {{ data.message }}</p>
      </Feature>

      <Feature name="testmode">
        <p><strong>Test Mode Active:</strong> Showing debugging information.</p>
      </Feature>

      <Feature name="shop" variant="de">
        <p>Welcome to the German Shop!</p>
      </Feature>

      <Feature name="shop" variant="en">
        <p>Welcome to the English Shop! (Hidden by current config)</p>
      </Feature>
    </div>
  `,
});

const app = createApp(App);
app.mount('#app');