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.

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
• Yarn
• unpkg

npm install @growthbook/growthbook

yarn add @growthbook/growthbook

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

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

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.