nuxt-growthbook

Nuxt GrowthBook

Nuxt GrowthBook integration module.

• ✨  Release Notes
• 🏀 Online playground

Quick Setup

1. Add nuxt-growthbook dependency to your project

# Using pnpm
pnpm add -D nuxt-growthbook

# Using yarn
yarn add --dev nuxt-growthbook

# Using npm
npm install --save-dev nuxt-growthbook

1. Add nuxt-growthbook to the modules section of nuxt.config.ts

export default defineNuxtConfig({
  modules: ['nuxt-growthbook']
})

1. Set client key in nuxt.config.ts or .env file

export default defineNuxtConfig({
  modules: ['nuxt-growthbook'],
  growthbook: {
    clientKey: 'YOUR_CLIENT_KEY'
  }
})

GROWTHBOOK_CLIENT_KEY=YOUR_CLIENT_KEY

1. You can now use GrowthBook in your Nuxt app ✨

<script setup>
const gb = useGrowthbook();
const bannerEnabled = gb.isOn("banner_enabled");
</script>

1. Optional: If you want to enable caching for GrowthBook API calls, use the routeRules option in your nuxt.config.ts file.

export default defineNuxtConfig({
   routeRules: {
     "/_growthbook/features": { swr: 60 },
   },
})

Development

# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch

# Release new version
npm run release