46 lines
891 B
Vue
46 lines
891 B
Vue
<!--
|
|
FeatureFlag Component
|
|
|
|
Conditionally renders content based on feature flag state.
|
|
|
|
Usage:
|
|
<FeatureFlag flag="experimental-search">
|
|
<SearchComponent />
|
|
</FeatureFlag>
|
|
|
|
With fallback:
|
|
<FeatureFlag flag="dark-mode">
|
|
<DarkModeUI />
|
|
<template #fallback>
|
|
<LightModeUI />
|
|
</template>
|
|
</FeatureFlag>
|
|
-->
|
|
<template>
|
|
<template v-if="isEnabled">
|
|
<slot></slot>
|
|
</template>
|
|
<template v-else-if="$slots.fallback">
|
|
<slot name="fallback"></slot>
|
|
</template>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from 'vue';
|
|
import { useFeatureFlags } from '../composables/useFeatureFlags.js';
|
|
|
|
const props = defineProps({
|
|
/**
|
|
* Feature flag name to check
|
|
*/
|
|
flag: {
|
|
type: String,
|
|
required: true
|
|
}
|
|
});
|
|
|
|
const { isEnabled: checkFlag } = useFeatureFlags();
|
|
|
|
const isEnabled = computed(() => checkFlag.value(props.flag));
|
|
</script>
|