toggly
  • What is toggly?
  • 🚀Getting started
    • Creating your first project
    • Using our Feature Flag Demo
    • Inviting Your Team
    • API Documentation
  • 🔘Feature Flags
    • Feature Flags in C# / .NET
      • Views
      • Controllers & Actions
      • Dependency Injection
      • Routing
      • IFeatureManagerSnapshot
      • Persistent Flags Across Requests
      • Disabled Action Handling
      • State Change Handlers
      • Custom Context
      • Snapshot Providers
        • RavenDB
        • Entity Framework
      • Debugging Endpoint
      • Serving Front-end Flags
      • Undefined Features In Development
      • Deployments and Version
    • Feature Flags in Vue.js
      • Feature Component
      • Directly Checking a Flag
      • Users and Rollouts
      • Flag Defaults
    • Feature Flags in JavaScript
      • Directly Checking a Flag
      • Definition Refresh
      • Users and Rollouts
      • Flag Defaults
    • Feature Flags in Flutter
      • Feature Widget
      • Directly Checking a Flag
      • Users and Rollouts
      • Flag Defaults
    • Feature Flags in HTML/CSS
  • 📈Metrics
    • Metrics in C# / .NET
      • Feature Usage
      • Business Metrics
      • Performance Metrics
  • 👩‍💻Use Cases
    • For Engineers
      • Develop continuously, turn on when ready
    • For Product Managers
      • Measure Feature Impact
    • For Agile Teams
      • Faster QA Cycles
      • Streamline Your Releases
Powered by GitBook
On this page
  • Show when a flag is on
  • Show if all of the listed features are on
  • Show if at least one of the listed features is on
  • Show if none of the listed features are on

Was this helpful?

  1. Feature Flags
  2. Feature Flags in Vue.js

Feature Component

The feature component is designed to make feature checking a natural part of the application

Show when a flag is on

<Feature feature-key="firstFeature">
  <p>This feature can be turned on or off.</p>
</Feature>

Show if all of the listed features are on

<Feature :feature-keys="['firstFeature', 'secondFeature']">
  <p>ALL the provided feature keys are TRUE.</p>
</Feature>

Show if at least one of the listed features is on

<Feature :feature-keys="['firstFeature', 'secondFeature']" requirement="any">
  <p>AT LEAST ONE the provided feature keys is TRUE.</p>
</Feature>

Show if none of the listed features are on

<Feature :feature-keys="['firstFeature', 'secondFeature']" requirement="all" :negate="true">
  <p>NONE of the provided feature keys is TRUE.</p>
</Feature>
PreviousFeature Flags in Vue.jsNextDirectly Checking a Flag

Last updated 2 years ago

Was this helpful?

🔘