{"_id":"@buildrflags/vue","name":"@buildrflags/vue","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@buildrflags/vue","version":"0.1.0","description":"Vue composables and plugin for BuildrFlags feature flag evaluation","type":"module","main":"./dist/index.js","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"scripts":{"build":"tsc","dev":"tsc --watch","lint":"eslint src --ext .ts","lint:fix":"eslint src --ext .ts --fix","typecheck":"tsc --noEmit","test":"vitest run","test:watch":"vitest","test:coverage":"vitest run --coverage","clean":"rm -rf dist node_modules"},"keywords":["feature-flags","buildrflags","vue","vue3","composables","feature-toggles"],"author":{"name":"BuildrLab","email":"hello@buildrlab.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/buildrlab/buildrflags.git","directory":"sdks/vue"},"homepage":"https://flags.buildrlab.com","bugs":{"url":"https://github.com/buildrlab/buildrflags/issues"},"peerDependencies":{"vue":"^3.3.0"},"devDependencies":{"@types/node":"^25.2.3","@vitejs/plugin-vue":"^6.0.4","@vue/test-utils":"^2.4.0","eslint":"^10.0.0","happy-dom":"^20.6.1","typescript":"^5.6.0","vite":"^7.3.1","vitest":"^4.0.18","vue":"^3.5.0"},"_id":"@buildrflags/vue@0.1.0","gitHead":"ab4413c03d51f7153ba783bfc3617a98d29e0356","_nodeVersion":"20.20.0","_npmVersion":"10.8.2","dist":{"integrity":"sha512-2lRZrHpYBh063bi8rGtVOYLHKPUTsy4ELlbaan9pF1FaVMQY1/e1pztkEbkNiW4+xyLK/juVpziInwQVpJwNlg==","shasum":"5ff6faba4b41f2d6ab659bd3d4500e18720bfe0a","tarball":"https://registry.npmjs.org/@buildrflags/vue/-/vue-0.1.0.tgz","fileCount":18,"unpackedSize":27722,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDOfBhGzT3YWzc6d2eeGpVRkuJgmYWXLC4Nt4AwsKY6gwIhAMqHM/YNx+ymziCZJ1IIiNn32BIH7RgfoownRBaXSZzI"}]},"_npmUser":{"name":"damogallagher","email":"damien.gallagher@gmail.com"},"directories":{},"maintainers":[{"name":"damogallagher","email":"damien.gallagher@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/vue_0.1.0_1771624910437_0.08416644716546329"},"_hasShrinkwrap":false}},"time":{"created":"2026-02-20T22:01:50.292Z","0.1.0":"2026-02-20T22:01:50.577Z","modified":"2026-02-20T22:01:50.821Z"},"maintainers":[{"name":"damogallagher","email":"damien.gallagher@gmail.com"}],"description":"Vue composables and plugin for BuildrFlags feature flag evaluation","homepage":"https://flags.buildrlab.com","keywords":["feature-flags","buildrflags","vue","vue3","composables","feature-toggles"],"repository":{"type":"git","url":"git+https://github.com/buildrlab/buildrflags.git","directory":"sdks/vue"},"author":{"name":"BuildrLab","email":"hello@buildrlab.com"},"bugs":{"url":"https://github.com/buildrlab/buildrflags/issues"},"license":"MIT","readme":"# @buildrflags/vue\n\nOfficial Vue 3 SDK for [BuildrFlags](https://flags.buildrlab.com) — feature flags made simple.\n\n## Installation\n\n```bash\nnpm install @buildrflags/vue\n# or\npnpm add @buildrflags/vue\n# or\nyarn add @buildrflags/vue\n```\n\n## Quick Start\n\n### 1. Install the Plugin\n\n```ts\n// main.ts\nimport { createApp } from 'vue';\nimport { BuildrFlagsPlugin } from '@buildrflags/vue';\nimport App from './App.vue';\n\nconst app = createApp(App);\n\napp.use(BuildrFlagsPlugin, {\n  apiKey: 'bf_production_xxx', // Your BuildrFlags API key\n});\n\napp.mount('#app');\n```\n\n### 2. Use Feature Flags in Components\n\n```vue\n<script setup lang=\"ts\">\nimport { useFlag } from '@buildrflags/vue';\n\nconst { enabled, isLoading } = useFlag('new-checkout-flow');\n</script>\n\n<template>\n  <LoadingSpinner v-if=\"isLoading\" />\n  <NewCheckout v-else-if=\"enabled\" />\n  <OldCheckout v-else />\n</template>\n```\n\n## Composables\n\n### `useFlag(flagKey)`\n\nGet the evaluation result for a single flag.\n\n```vue\n<script setup lang=\"ts\">\nimport { useFlag } from '@buildrflags/vue';\n\nconst { enabled, isLoading } = useFlag('dark-mode');\n</script>\n\n<template>\n  <DarkTheme v-if=\"enabled\" />\n  <LightTheme v-else />\n</template>\n```\n\n### `useFlagValue(flagKey, defaultValue?)`\n\nSimple boolean access with optional default value.\n\n```vue\n<script setup lang=\"ts\">\nimport { useFlagValue } from '@buildrflags/vue';\n\n// Returns false while loading, true once flag is fetched (if enabled)\nconst showBanner = useFlagValue('promo-banner', false);\n</script>\n\n<template>\n  <PromoBanner v-if=\"showBanner\" />\n</template>\n```\n\n### `useFlags()`\n\nGet all flags with loading/error state and manual refresh.\n\n```vue\n<script setup lang=\"ts\">\nimport { useFlags } from '@buildrflags/vue';\n\nconst { flags, isLoading, error, refresh } = useFlags();\n</script>\n\n<template>\n  <div v-if=\"error\" class=\"error\">{{ error }}</div>\n  <button @click=\"refresh\">Refresh Flags</button>\n  <pre>{{ flags }}</pre>\n</template>\n```\n\n### `useFlagsEnabled(flagKeys, mode?)`\n\nCheck multiple flags at once. Mode can be `'all'` (default) or `'any'`.\n\n```vue\n<script setup lang=\"ts\">\nimport { useFlagsEnabled } from '@buildrflags/vue';\n\n// All flags must be enabled\nconst canAccessPremium = useFlagsEnabled(['premium-tier', 'new-dashboard'], 'all');\n\n// At least one flag must be enabled\nconst showAnyPromo = useFlagsEnabled(['black-friday', 'cyber-monday'], 'any');\n</script>\n\n<template>\n  <PremiumDashboard v-if=\"canAccessPremium\" />\n  <PromoSection v-if=\"showAnyPromo\" />\n</template>\n```\n\n## Plugin Options\n\n```ts\ninterface BuildrFlagsPluginOptions {\n  // Required: Your BuildrFlags API key\n  apiKey: string;\n\n  // Optional: Custom API base URL\n  // Default: 'https://api.flags.buildrlab.com'\n  baseUrl?: string;\n\n  // Optional: Auto-refresh interval in milliseconds\n  // Set to 0 to disable auto-refresh\n  // Default: 60000 (1 minute)\n  refreshInterval?: number;\n\n  // Optional: Pre-loaded flags for SSR/SSG\n  initialFlags?: Record<string, boolean>;\n}\n```\n\n## Server-Side Rendering (SSR)\n\nFor SSR with Nuxt or similar, you can pre-load flags server-side:\n\n```ts\n// Server-side: fetch flags during SSR\nconst response = await fetch('https://api.flags.buildrlab.com/api/evaluate/all', {\n  headers: { 'X-API-Key': 'bf_production_xxx' },\n});\nconst { flags } = await response.json();\n\n// Convert to a simple map\nconst initialFlags: Record<string, boolean> = {};\nfor (const flag of flags) {\n  initialFlags[flag.flagKey] = flag.enabled;\n}\n\n// Pass to plugin\napp.use(BuildrFlagsPlugin, {\n  apiKey: 'bf_production_xxx',\n  initialFlags,\n});\n```\n\n## TypeScript Support\n\nThis package is written in TypeScript and includes full type definitions.\n\n```ts\nimport type {\n  BuildrFlagsPluginOptions,\n  BuildrFlagsState,\n  UseFlagResult,\n  UseFlagsResult,\n} from '@buildrflags/vue';\n```\n\n## Requirements\n\n- Vue 3.3+\n- TypeScript 5.0+ (optional, but recommended)\n\n## License\n\nMIT © [BuildrLab](https://buildrlab.com)\n","readmeFilename":"README.md","_rev":"1-eba0888db9c9abc81f0c45433cfc70df"}