flagsmith-vue

> An (unofficial) Flagsmith Vue.js integration that uses Vue Composition API to dynamically update feature flags and traits in components. Compatible with Vue.js versions 2.7 and 3.

[![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]

[npm]: https://www.npmjs.com/package/flagsmith-vue
[github]: https://github.com/jhoermann/flagsmith-vue
[actions]: https://github.com/jhoermann/flagsmith-vue/actions/workflows/tests.yml?query=branch%3Amain
[codacy]: https://app.codacy.com/gh/jhoermann/flagsmith-vue/dashboard

[badge-npm]: https://img.shields.io/npm/v/flagsmith-vue?logo=npm&logoColor=white&color=red
[badge-github]: https://img.shields.io/github/package-json/v/jhoermann/flagsmith-vue?logo=github&color=blue
[badge-actions]: https://img.shields.io/github/actions/workflow/status/jhoermann/flagsmith-vue/tests.yml?logo=github&label=Tests
[badge-codacy]: https://img.shields.io/codacy/grade/27a356f30e97429e9c8c0b865e41240a?logo=codacy
[badge-coverage]: https://img.shields.io/codacy/coverage/27a356f30e97429e9c8c0b865e41240a?logo=codacy

Installation

``bash
npm install flagsmith-vue flagsmith
`

Usage

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

$3

Recommended: Initialize by Installing as a Vue Plugin

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

`typescript
// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import flagsmithVue from 'flagsmith-vue'

const app = createApp(App)

app.use(flagsmithVue, {
environmentID: 'YOUR_ENVIRONMENT_ID',
// Add any other Flagsmith initialization options here
})

app.mount('#app')
`

Alternative: Initialize with useFlagsmith

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

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

`typescript
// App.vue (using