vue-feature-flags

Thư viện quản lý Feature Flags cho Vue.js 3 sử dụng localStorage.

A lightweight feature flags library for Vue.js 3 using localStorage.

Tính năng | Features

• Ẩn hoàn toàn - Không có UI, không có console log, không có hint nào cho người dùng cuối
• localStorage - Lưu trữ đơn giản với format feature_flag_<name>: 1|0
• Reactive - Tự động cập nhật UI khi flag thay đổi
• TypeScript - Hỗ trợ đầy đủ type definitions
• Nhẹ - Không dependency ngoài Vue

Cài đặt | Installation

npm install vue-feature-flags

Sử dụng | Usage

1. Đăng ký Plugin | Register Plugin

// main.ts
import { createApp } from 'vue'
import { FeatureFlagsPlugin } from 'vue-feature-flags'
import App from './App.vue'

const app = createApp(App)

app.use(FeatureFlagsPlugin, {
  // Tùy chọn: Giá trị mặc định cho các flag
  initialFlags: {
    new_checkout: false,
    dark_mode: true
  }
})

app.mount('#app')

2. Sử dụng trong Component | Use in Components

Cách 1: Composable

<script setup lang="ts">
import { useFeatureFlag } from 'vue-feature-flags'

const { isEnabled } = useFeatureFlag('new_checkout')
</script>

<template>
  <NewCheckout v-if="isEnabled" />
  <OldCheckout v-else />
</template>

Cách 2: Component

<script setup lang="ts">
import { FeatureFlagComponent } from 'vue-feature-flags'
</script>

<template>
  <FeatureFlagComponent feature="new_checkout">
    <!-- Hiển thị khi flag = 1 -->
    <NewCheckout />
    
    <template #fallback>
      <!-- Hiển thị khi flag = 0 -->
      <OldCheckout />
    </template>
  </FeatureFlagComponent>
</template>

Cấu hình Feature Flags | Configuration

Feature flags được lưu trong localStorage theo format:

| Key | Value | Mô tả | |-----|-------|-------| | feature_flag_<name> | 1 | Bật | | feature_flag_<name> | 0 | Tắt |

Cách bật một feature:

1. Mở Browser DevTools (F12)
2. Chọn tab Application → Local Storage
3. Thêm key feature_flag_new_checkout với value 1
4. Refresh trang

Điều khiển bằng code:

import { useFeatureFlag, useFeatureFlags } from 'vue-feature-flags'

// Một flag
const { isEnabled, enable, disable, toggle } = useFeatureFlag('my_feature')

// Tất cả flags
const { flags, enable, disable, toggle, add, remove } = useFeatureFlags()

API

Plugin Options

interface FeatureFlagsPluginOptions {
  prefix?: string                      // Prefix cho localStorage key (mặc định: 'feature_flag_')
  initialFlags?: Record<string, boolean>  // Giá trị mặc định
}

useFeatureFlag(feature: string)

| Return | Type | Mô tả | |--------|------|-------| | isEnabled | ComputedRef<boolean> | Trạng thái flag | | enable | () => void | Bật flag | | disable | () => void | Tắt flag | | toggle | () => void | Đảo trạng thái |

useFeatureFlags()

| Return | Type | Mô tả | |--------|------|-------| | flags | ComputedRef<Record<string, boolean>> | Tất cả flags | | isEnabled | (feature: string) => boolean | Kiểm tra flag | | enable | (feature: string) => void | Bật flag | | disable | (feature: string) => void | Tắt flag | | toggle | (feature: string) => void | Đảo trạng thái | | add | (feature: string, enabled?: boolean) => void | Thêm flag mới | | remove | (feature: string) => void | Xóa flag |

FeatureFlagComponent

| Prop | Type | Mô tả | |------|------|-------| | feature | string | Tên feature flag |

| Slot | Mô tả | |------|-------| | default | Hiển thị khi flag bật | | fallback | Hiển thị khi flag tắt |

Bảo mật | Security

Thư viện được thiết kế để ẩn hoàn toàn với người dùng cuối:

• Không có nút bấm hay UI visible
• Không có console log hay thông báo
• Không có global object trên window
• Chỉ có thể truy cập qua DevTools → localStorage

Lưu ý: localStorage là client-side storage. Với các tính năng quan trọng về bảo mật, luôn validate ở server.

Yêu cầu | Requirements

• Vue 3.3+
• Node 16+
• Trình duyệt hỗ trợ localStorage và ES2020

License

MIT