VueCraft NPM

Feature ​

Conditionally renders its default slot when a flag (or a whole group) is enabled, with v-if-like behavior — the content is not rendered at all when the condition is false, unlike v-feature.

vue
<!-- Basic -->
<Feature name="newDashboard">
  <NewDashboard />
</Feature>

<!-- Fallback slot -->
<Feature name="betaSearch">
  <template #default><BetaSearchBar /></template>
  <template #fallback><LegacySearchBar /></template>
</Feature>

<!-- Fallback prop -->
<Feature name="betaSearch" fallback="Feature is under development">
  <BetaSearchBar />
</Feature>

<!-- Inverted — show when flag is off -->
<Feature name="maintenanceMode" :inverted="true">
  <MainContent />
</Feature>

<!-- Wrap in an HTML element -->
<Feature name="newDashboard" tag="section">
  <NewDashboard />
</Feature>

<!-- Loading state while loader runs -->
<Feature name="loaderFlag">
  <template #loading><Spinner /></template>
  <template #default><NewFeature /></template>
  <template #fallback><OldFeature /></template>
</Feature>

<!-- Group — show when ALL flags in the group are enabled -->
<Feature group="beta">
  <BetaLabel />
</Feature>

Props ​

name ​

string · default: —

Flag name to check.

group ​

string · default: —

Group name to check instead of a single flag — true only when every flag in the group (configured via the groups option) is enabled. If both name and group are given, group silently wins and name is ignored.

fallback ​

string | Component · default: —

What to render when the flag is off, as a prop-based shortcut for the fallback slot. Ignored if a fallback slot is also provided — the slot takes priority.

inverted ​

boolean · default: false

Render when the flag is false instead of true.

tag ​

string · default: —

Wrap the rendered content in this HTML element. With no tag, content renders without a wrapper.

Slots ​

default ​

Content shown when the flag (or group) is on.

fallback ​

Content shown when the flag (or group) is off. Takes priority over the fallback prop when both are given.

loading ​

Content shown while isLoading is true (i.e. while an async loader is running for the first time).