{"id":15024783,"url":"https://github.com/jhoermann/flagsmith-vue","last_synced_at":"2026-02-24T14:12:22.397Z","repository":{"id":231580940,"uuid":"780948210","full_name":"jhoermann/flagsmith-vue","owner":"jhoermann","description":"Flagsmith Vue.js integration","archived":false,"fork":false,"pushed_at":"2025-07-02T07:08:18.000Z","size":999,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-07-02T08:25:30.822Z","etag":null,"topics":["feature-flags","flagsmith","vuejs"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jhoermann.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-04-02T13:16:38.000Z","updated_at":"2025-07-02T07:08:22.000Z","dependencies_parsed_at":"2024-04-15T10:49:20.277Z","dependency_job_id":"c627ce11-707b-4e07-9035-5a61290586a4","html_url":"https://github.com/jhoermann/flagsmith-vue","commit_stats":null,"previous_names":["jhoermann/flagsmith-vue"],"tags_count":16,"template":false,"template_full_name":null,"purl":"pkg:github/jhoermann/flagsmith-vue","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jhoermann%2Fflagsmith-vue","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jhoermann%2Fflagsmith-vue/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jhoermann%2Fflagsmith-vue/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jhoermann%2Fflagsmith-vue/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jhoermann","download_url":"https://codeload.github.com/jhoermann/flagsmith-vue/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jhoermann%2Fflagsmith-vue/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265418438,"owners_count":23761817,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["feature-flags","flagsmith","vuejs"],"created_at":"2024-09-24T20:00:54.958Z","updated_at":"2026-02-24T14:12:22.390Z","avatar_url":"https://github.com/jhoermann.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# flagsmith-vue\n\n\u003e An (unofficial) [Flagsmith](https://www.flagsmith.com) Vue.js integration that uses [Vue Composition API](https://vuejs.org/guide/extras/composition-api-faq.html) to dynamically update feature flags and traits in components. Compatible with Vue.js versions `2.7` and `3`.\n\n[![npm][badge-npm]][npm] [![GitHub][badge-github]][github] [![GitHub tests workflow][badge-actions]][actions] [![Codacy Code Quality][badge-codacy]][codacy] [![Codacy Coverage][badge-coverage]][codacy]\n\n[npm]: https://www.npmjs.com/package/flagsmith-vue\n[github]: https://github.com/jhoermann/flagsmith-vue\n[actions]: https://github.com/jhoermann/flagsmith-vue/actions/workflows/tests.yml?query=branch%3Amain\n[codacy]: https://app.codacy.com/gh/jhoermann/flagsmith-vue/dashboard\n\n[badge-npm]: https://img.shields.io/npm/v/flagsmith-vue?logo=npm\u0026logoColor=white\u0026color=red\n[badge-github]: https://img.shields.io/github/package-json/v/jhoermann/flagsmith-vue?logo=github\u0026color=blue\n[badge-actions]: https://img.shields.io/github/actions/workflow/status/jhoermann/flagsmith-vue/tests.yml?logo=github\u0026label=Tests\n[badge-codacy]: https://img.shields.io/codacy/grade/27a356f30e97429e9c8c0b865e41240a?logo=codacy\n[badge-coverage]: https://img.shields.io/codacy/coverage/27a356f30e97429e9c8c0b865e41240a?logo=codacy\n\n## Installation\n\n```bash\nnpm install flagsmith-vue @flagsmith/flagsmith\n```\n\n## Usage\n\nThe recommended way to initialize Flagsmith is by installing it as a Vue plugin, which makes it available throughout your application. Alternatively, for more localized use within specific component trees, you can use the `useFlagsmith` composable.\n\n### Step 1: Initialize Flagsmith\n\n**Recommended: Initialize by Installing as a Vue Plugin**\n\nIn your main application file (e.g., `main.ts` or `main.js`), import and use the plugin. Replace `YOUR_ENVIRONMENT_ID` with your actual ID. For more init options, see [Flagsmith initialization options](https://docs.flagsmith.com/clients/javascript#initialisation-options).\n\n```typescript\n// main.ts\nimport { createApp } from 'vue'\nimport App from './App.vue'\nimport flagsmithVue from 'flagsmith-vue'\n\nconst app = createApp(App)\n\napp.use(flagsmithVue, {\n    environmentID: 'YOUR_ENVIRONMENT_ID',\n    // Add any other Flagsmith initialization options here\n})\n\napp.mount('#app')\n```\n\n**Alternative: Initialize with `useFlagsmith`**\n\nThis method is suitable if you only need Flagsmith functionality within a specific part of your application (e.g., a single component tree) rather than globally.\n\nIn your main app component for that specific tree (e.g., `App.vue` or a specific feature component), initialize Flagsmith. Replace `YOUR_ENVIRONMENT_ID` with your actual ID. For more init options, see [Flagsmith initialization options](https://docs.flagsmith.com/clients/javascript#initialisation-options).\n\n```typescript\n// App.vue (using \u003cscript setup\u003e) or main.ts\nimport { useFlagsmith } from 'flagsmith-vue'\n\nuseFlagsmith({ environmentID: 'YOUR_ENVIRONMENT_ID' })\n```\n\n### Step 2: Accessing Flags and Traits in Components\n\nRegardless of the initialization method chosen, you can access flags and traits in any child component within the scope of the initialized Flagsmith instance.\n\nFor flags, use `useFlags` to get the desired flags. Access `yourFlag.value?.enabled` for enabled status and `yourFlag.value?.value` for the flag's value. Similarly, `useTraits` can be used for accessing user traits.\n\n```typescript\n// MyComponent.vue (using \u003cscript setup\u003e)\nimport { useFlags } from 'flagsmith-vue'\n\nconst flags = useFlags(['my_feature', 'feature_with_value'])\n\n// Check if a flag is enabled:\n// if (flags.my_feature.value?.enabled) { /* ... */ }\n\n// Get a remote config value:\n// const configValue = flags.feature_with_value.value?.value;\n```\n\n## API Reference\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003ccode\u003euseFlagsmith\u003c/code\u003e\u003c/summary\u003e\n\nInitializes the Flagsmith integration. Call once in your root component (e.g., `App.vue`).\n\n- **Parameters**:\n    - `options: IInitConfig` (Required): Flagsmith client initialization options (see [Flagsmith docs](https://docs.flagsmith.com/clients/javascript#initialisation-options)).\n    - `flagsmithInstance?: IFlagsmith` (Optional): An existing Flagsmith SDK instance.\n- **Returns**: `FlagsmithHelper` - An object containing:\n    - `flags: Ref\u003cIFlags | undefined\u003e` - Reactive flags object.\n    - `traits: Ref\u003cITraits | undefined\u003e` - Reactive traits object.\n    - `loadingState: Ref\u003cLoadingState | undefined\u003e` - Reactive SDK loading status.\n    - `flagsmithInstance: IFlagsmith` - Direct Flagsmith SDK instance.\n- **Usage Example**:\n    ```typescript\n    import { useFlagsmith } from 'flagsmith-vue'\n    useFlagsmith({ environmentID: 'YOUR_ENVIRONMENT_ID' })\n    ```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003ccode\u003euseFlags\u003c/code\u003e\u003c/summary\u003e\n\nAccesses specified feature flags reactively.\n\n- **Parameters**:\n    - `flagsToUse: FKey\u003cF\u003e[]` (Required): Array of flag names to retrieve.\n    - `flagsmithHelper?: FlagsmithHelper\u003cF, T\u003e` (Optional): `FlagsmithHelper` instance (uses global if not provided).\n- **Returns**: `Object` - Keys are flag names, values are `ComputedRef\u003cIFlagsmithFeature | undefined\u003e`. Access flag properties via `.value` (e.g., `flags.my_flag.value?.enabled`).\n- **Usage Example**:\n    ```typescript\n    import { useFlags } from 'flagsmith-vue'\n    const flags = useFlags(['feature_one', 'feature_two'])\n    // if (flags.feature_one.value?.enabled) { /* ... */ }\n    // const value = flags.feature_two.value?.value;\n    ```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003ccode\u003euseTraits\u003c/code\u003e\u003c/summary\u003e\n\nAccesses specified user traits reactively.\n\n- **Parameters**:\n    - `traitsToUse: T[]` (Required): Array of trait names to retrieve.\n    - `flagsmithHelper?: FlagsmithHelper\u003cF, T\u003e` (Optional): `FlagsmithHelper` instance (uses global if not provided).\n- **Returns**: `Object` - Keys are trait names, values are `ComputedRef\u003cIFlagsmithTrait | undefined\u003e`. Access trait properties via `.value` (e.g., `traits.my_trait.value?.value`).\n- **Usage Example**:\n    ```typescript\n    import { useTraits } from 'flagsmith-vue'\n    const traits = useTraits(['user_type', 'preferred_color'])\n    // const userType = traits.user_type.value?.value;\n    ```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003ccode\u003euseFlagsmithLoading\u003c/code\u003e\u003c/summary\u003e\n\nProvides reactive status information about the SDK's loading and fetching states.\n\n- **Parameters**:\n    - `flagsmithHelper?: FlagsmithHelper\u003cF, T\u003e` (Optional): `FlagsmithHelper` instance (uses global if not provided).\n- **Returns**: `Object` - Contains `ComputedRef`s for SDK states:\n    - `error: ComputedRef\u003cError | null\u003e` - Error object if an error occurred.\n    - `isFetching: ComputedRef\u003cboolean\u003e` - True if actively fetching.\n    - `isLoading: ComputedRef\u003cboolean\u003e` - True during initial load.\n    - `source: ComputedRef\u003cFlagSource\u003e` - Source of flag data (`'SERVER'`, `'CACHE'`, etc.).\n- **Usage Example**:\n    ```typescript\n    import { useFlagsmithLoading } from 'flagsmith-vue'\n    const { isLoading, isFetching, error, source } = useFlagsmithLoading()\n    // \u003cdiv v-if=\"isLoading.value\"\u003eLoading...\u003c/div\u003e\n    ```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003ccode\u003euseFlagsmithInstance\u003c/code\u003e\u003c/summary\u003e\n\nProvides direct access to the underlying Flagsmith JavaScript SDK instance for advanced use cases.\n\n- **Parameters**:\n    - `flagsmithHelper?: FlagsmithHelper\u003cF, T\u003e` (Optional): `FlagsmithHelper` instance (uses global if not provided).\n- **Returns**: `IFlagsmith` - The direct Flagsmith SDK instance.\n- **Usage Example**:\n    ```typescript\n    import { useFlagsmithInstance } from 'flagsmith-vue'\n    const flagsmithInstance = useFlagsmithInstance()\n    // flagsmithInstance.identify('user_id');\n    // flagsmithInstance.setTrait('example_trait', 123);\n    ```\n    Refer to the official [Flagsmith JavaScript Client SDK documentation](https://docs.flagsmith.com/clients/javascript) for all available SDK methods.\n\n\u003c/details\u003e\n\n## License\n\nUnless otherwise noted, all source code is licensed under the MIT License.  \nCopyright (c) 2024 - today Jochen Hörmann\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjhoermann%2Fflagsmith-vue","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjhoermann%2Fflagsmith-vue","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjhoermann%2Fflagsmith-vue/lists"}