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. If neither is given, the component is treated as disabled (renders its fallback/nothing) and logs a console.warn in dev mode to flag the misconfiguration.

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