How to Use GrowthBook with Vue

This guide shows you how to integrate GrowthBook's JavaScript SDK into your Vue app. We provide examples using both the Composition API and the 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.

Installation

Add the @growthbook/growthbook package to your project.

npm

npm install @growthbook/growthbook

Yarn

yarn add @growthbook/growthbook

unpkg

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

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:

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

Composition API

component.vue

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

Options API

component.vue

<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 {
  // Define a variable to store the feature flag result
  data() {
    return {
      showBanner: false
    }
  },
  mounted() {
    const gb = inject(gbKey) // Inject the GrowthBook instance

    // Set the showBanner variable to the feature flag value
    if (gb) {
      this.showBanner = gb.isOn('show-banner')

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

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.

component.vue

<template>
  <div>
    <h1 v-if="showBanner">Now you see me!</h1>
  </div>
</template>

Examples

See examples of using GrowthBook with Vue's Composition and Options API.