Skip to main content

Vue.js

This page includes example implementations for Vue 3 (composition API) and Vue 2 (options API).

The Vue.js implementations are a light wrapper around the JavaScript library, so you may want to view those docs first to familiarize yourself with the basic classes and methods.

Installation

Add the @growthbook/growthbook package to your project.

With Yarn:

yarn add @growthbook/growthbook

With NPM:

npm i --save @growthbook/growthbook

With unpkg:

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

Vue 3 Composition API

Create a provider

First, we're going to create a provider that can be injected in your app.

Create a file ./src/utils/growthbook/growthbook.ts and add the following code:

./src/utils/growthbook/growthbook.ts
import type { App, InjectionKey } from "vue";
import { GrowthBook } from "@growthbook/growthbook";

/**
* Configuration for the options passed to the app.use() call
*/
export type GrowthBookVuePluginConfig = {
/**
* The endpoint that your features are hosted on. Get this from the Environments -> SDK Endpoints section
*/
featuresEndpoint: string;

/**
* Allows you to use the Chrome DevTools Extension to test/debug.
* Learn more: https://docs.growthbook.io/tools/chrome-extension
*/
enableDevMode: boolean;
};

/**
* The provided GrowthBook would be null in the event that the API call to the features endpoint fails.
*/
type GrowthBookProvider = {
init: () => Promise<GrowthBook | null>;
};

export const growthBookKey = Symbol() as InjectionKey<GrowthBookProvider>;

const getFeaturesJson = async (
featuresEndpoint: string
): Promise<Record<string, any>> => {
const response = await fetch(featuresEndpoint);
return await response.json();
};

export const growthBookPlugin = {
install(
app: App,
{ featuresEndpoint, enableDevMode = false }: GrowthBookVuePluginConfig
) {
let growthBook: GrowthBook | null = null;

const init = async (): Promise<GrowthBook | null> => {
if (growthBook) {
return growthBook;
}

try {
const json = await getFeaturesJson(featuresEndpoint);

growthBook = new GrowthBook({
enableDevMode,
});

growthBook.setFeatures(json.features);

return growthBook;
} catch (e) {
console.error("GrowthBook Vue plugin error", e);
return null;
}
};

app.provide<GrowthBookProvider>(growthBookKey, {
init,
});
},
};

Add the provider to your app

Next, in the ./src/main.ts file of your app, use this new plugin we just created:

./src/main.ts
import { growthBookPlugin } from "@/utils/growthbook/growthbook";

const app = createApp(App);

app.use(router);

// Use the new GrowthBook plugin like other plugins
app.use(growthBookPlugin, {
featuresEndpoint: "https://cdn.growthbook.io/api/features/:env_key",
enableDevMode: true,
});

app.mount("#app");

You can find your features endpoint on the Environments SDK Endpoints page .

Use GrowthBook in your components

Next, to use the GrowthBook SDK in our components, we will need to inject it, initialize the SDK with user attributes, and then check features.

<script setup lang='ts'>
import { inject, onMounted, ref } from "vue";
import { growthBookKey } from "@/utils/growthbook/growthbook";

const growthBookInjectable = inject(growthBookKey);

const bannerText = ref<string>("");

onMounted(() => {
growthBookInjectable?.init().then((growthBook) => {
if (!growthBook) {
console.error("GrowthBook failed to initialize");
return;
}

growthBook.setAttributes({
loggedIn: true,
country: "canada",
employee: true,
id: "user-employee-123456789",
});

const evaluatedBannerText = growthBook.getFeatureValue("banner_text", "");
if (typeof evaluatedBannerText !== "undefined") {
bannerText.value = evaluatedBannerText;
}
});
});

The above code will allow you to use the dynamic {{bannerText}} value in your template.

Vue 2 Options API

Create a provider

First, we're going to create a provider that can be injected in your app.

Create a file ./src/utils/growthbook/growthbook.js and add the following code:

./src/utils/growthbook/growthbook.ts
import { GrowthBook } from "@growthbook/growthbook";

const getFeaturesJson = (featuresEndpoint) => {
return fetch(featuresEndpoint)
.then((response) => {
return response.json()
})
}

export const GrowthBookVuePlugin = {
install: function (Vue, { featuresEndpoint, enableDevMode = false }) {
let growthBook = null;

Vue.prototype.initGrowthBook = function initGrowthBook() {
if (growthBook) {
return Promise.resolve(growthBook);
}

return getFeaturesJson(featuresEndpoint)
.then((json) => {
growthBook = new GrowthBook({
enableDevMode,
});

growthBook.setFeatures(json.features);

return growthBook;
})
.catch((error) => {
console.error("GrowthBook Vue plugin initialization error", error);
return null;
})
}
}
}

Add the provider to your app

Next, in the ./src/main.js file of your app, use this new plugin we just created:

./src/main.js
import Vue from 'vue'
import App from './App.vue'
import { GrowthBookVuePlugin } from './utils/growthbook/growthbook'

Vue.config.productionTip = false

Vue.use(GrowthBookVuePlugin, {
featuresEndpoint: "https://cdn.growthbook.io/api/features/:feature_key",
enableDevMode: true,
})

new Vue({
render: h => h(App),
}).$mount('#app')

You can find your features endpoint on the Environments SDK Endpoints page .

Use GrowthBook in your components

Next, to use the GrowthBook SDK in our components, we will need to inject it, initialize the SDK with user attributes, and then check features.

<script>
export default {
name: 'PublicPage',

props: {},

mounted() {
this
.initGrowthBook()
.then((growthBook) => {
if (!growthBook) {
console.warn('GrowthBook failed to initialize. Feature flags and experiments not active.')
return
}

growthBook.setAttributes({
loggedIn: true,
country: "france",
employee: false,
id: "user-abc123",
});

const evaluatedBannerText = growthBook.getFeatureValue("banner_text", "");
if (typeof evaluatedBannerText !== "undefined") {
this.bannerText = evaluatedBannerText;
}
})
.catch((error) => {
console.error('Unknown Error', error)
})
.finally(() => {
this.loading = false
})
},

data() {
return {
bannerText: '',
}
}
}

The above code will allow you to use the dynamic {{bannerText}} value in your template.

Examples