Skip to content

Feature Directive

v-feature — toggles element visibility based on one or more flags, v-show-style (display: none) — the DOM node is always present. For v-if-like behavior, where the content isn't rendered at all, use <Feature> instead.

vue
<!-- Show when flag is on -->
<div v-feature="'newDashboard'">...</div>

<!-- Show when flag is off (inverted) -->
<div v-feature:not="'betaSearch'">...</div>

<!-- Show when ALL flags are on -->
<div v-feature="['newDashboard', 'betaSearch']">...</div>

Value

string | string[] — one flag name, or an array of flag names combined with AND (every flag must be enabled).

Arguments

:not

Inverts the result — the element shows when the flag (or flags) is off.