> ## Documentation Index
> Fetch the complete documentation index at: https://docs2.growthbook.io/llms.txt
> Use this file to discover all available pages before exploring further.

# How to Use GrowthBook with Vue

> Start A/B testing and feature flagging in Vue. This guide shows you how to implement GrowthBook's JavaScript SDK using Vue's Composition and Options API.

export const ExternalLink = () => {
  return <svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" style={{
    display: "inline-block",
    verticalAlign: "-0.125em",
    marginLeft: "0.15em"
  }}>
      <path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path>
    </svg>;
};

This guide shows you how to integrate GrowthBook's JavaScript SDK into your Vue app. We provide examples using both the [Composition API](https://vuejs.org/guide/introduction.html#composition-api) and the [Options API](https://vuejs.org/guide/introduction.html#options-api).

While this guide focuses on using GrowthBook in a Vue app, it's important to note that the underlying functionality is powered by the GrowthBook JavaScript SDK. To explore the full range of methods, capabilities, and customization options, check out the official [JavaScript SDK docs](/lib/js).

## Installation

Add the `@growthbook/growthbook` package to your project.

<CodeGroup>
  ```sh npm theme={null}
  npm install @growthbook/growthbook
  ```

  ```sh Yarn theme={null}
  yarn add @growthbook/growthbook
  ```

  ```html unpkg theme={null}
  <script type="module">
    import { GrowthBook } from "https://unpkg.com/@growthbook/growthbook/dist/bundles/esm.min.js";
    //...
  </script>
  ```
</CodeGroup>

## Create a Provider

Use Vue's `app.provide` method to make GrowthBook available to your components.

In your app's entry file, usually `./src/main.ts`, add the following code:

```ts theme={null}
// Import the GrowthBook SDK
import { GrowthBook } from '@growthbook/growthbook'

// Add imports needed to create the provider
import type { InjectionKey } from 'vue'
import { createApp, reactive } from 'vue'

import App from './App.vue'
import './assets/main.css'

// Create a reactive instance of GrowthBook
const gbInstance = reactive(
  new GrowthBook({
    clientKey: 'YOUR_CLIENT_KEY',
    attributes: {
      // Add user attributes here
    },
    enableDevMode: true // Optional: Enable the Visual Editor and dev tools
  })
)

// Share the provider type with other components
export const gbKey = Symbol('gb') as InjectionKey<typeof gbInstance | null>

// Initialize GrowthBook with streaming enabled for real-time updates
const initializeGrowthBook = async () => {
  try {
    await gbInstance.init({ streaming: true })
    return gbInstance
  } catch (e) {
    console.error('Error initializing GrowthBook:', e)
    return null
  }
}

initializeGrowthBook().then((gbInstance) => {
  const app = createApp(App)

  // Provide the GrowthBook instance
  app.provide(gbKey, gbInstance)
  app.mount('#app')
})
```

## Inject GrowthBook into a Component

Next, import the `gbKey` and inject GrowthBook into your component. Below, we use the `isOn` helper to check if a feature flag is on. See additional helpers in the [JS SDK docs](/lib/js).

<Tabs>
  <Tab title="Composition API">
    ```ts title="component.vue" theme={null}
    <script setup lang="ts">
    // Import Vue functions and the gbKey from main to preserve type info
    import { inject, ref, watch } from 'vue'
    import { gbKey } from '../main'

    // Inject the GrowthBook instance
    const growthbook = inject(gbKey)

    // Create a reactive variable to store and update the feature flag result
    const showBanner = ref(growthbook?.isOn('show-banner'))

    // Optional: Watch the feature flag for changes (requires streaming to be enabled)
    if (growthbook) {
      watch(growthbook, () => {
        showBanner.value = growthbook?.isOn('show-banner')
      })
    }
    </script>
    ```
  </Tab>

  <Tab title="Options API">
    ```ts title="component.vue" theme={null}
    <script lang="ts">
    // Import Vue functions and the gbKey from main to preserve type info
    import { inject, watch } from 'vue'
    import { gbKey } from '../main'

    export default {
      // Inject the GrowthBook instance
      inject: {
        gb: { from: gbKey },
      },
      // Define a variable to store the feature flag result
      data() {
        return {
          showBanner: false
        }
      },
      mounted() {
        // Set the showBanner variable to the feature flag value
        if (this.gb) {
          this.showBanner = this.gb.isOn('show-banner')

          // Optional: Watch the feature flag for changes (requires streaming to be enabled)
          watch(this.gb, () => {
            this.showBanner = this.gb.isOn('show-banner')
          })
        }
      }
    }
    </script>
    ```
  </Tab>
</Tabs>

## Use the Feature Flag in a Template

Combine Vue's `v-if` directive with the `showBanner` variable to conditionally render content based on the feature flag value.

```html title="component.vue" theme={null}
<template>
  <div>
    <h1 v-if="showBanner">Now you see me!</h1>
  </div>
</template>
```

## Examples

See [examples <ExternalLink />](https://github.com/growthbook/examples/tree/b5e9138064cb565ef2c7bea30b97bdbdb797f67e/vue) of using GrowthBook with Vue's Composition and Options API.