Hi there, does anyone have a working example of using GrowthBook with Nuxt?

Hi Donovan! We have several examples of using Next with GB. Is there something in particular you're looking to do?

Thanks for the link. I’m just trying to get a basic proof of concept setup in our nuxt app, so that I further motivate the move to GrowthBook. I’ve explained the problem I’m having in a bit more detail here

Ok, so if you want to get a basic example up and running, I'd look at the client version of the Next js app. There could be a couple reasons why you're not seeing the expected result. How are you initializing growthbook? And, are you passing an ​`id`​ attribute?

Thanks for link, I had a look and I think I’m doing something similar. So, I’ve created a client side Nuxt plugin

growthBook.client.ts

which initialises the plugin and creates a growthBook client provider (

$gbClient

) that I can use within the components:

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.setPayload(json.features)

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

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

export default defineNuxtPlugin(async nuxtApp => {
  nuxtApp.vueApp.use(growthBookPlugin, {
    featuresEndpoint:
      '<https://cdn.growthbook.io/api/features/[SDK-key]>',
    enableDevMode: true
  })

  const growthBookInjectable = inject(growthBookKey)

  console.log('GrowthBook Injected', growthBookInjectable)

  const growthBook = await growthBookInjectable?.init()
  if (!growthBook) {
    console.error('GrowthBook failed to initialize')
    return {}
  }

  console.log('GrowthBook', growthBook)

  growthBook.setAttributes({
    loggedIn: false,
    id: Math.random().toString(36).substring(2)
  })

  return {
    provide: {
      gbClient: growthBook
    }
  }
})

Then inside my component

onMount

I’m trying to retrieve the feature flag value:

onMounted(async () => {
  if (process.client) {
    const { $gbClient } = useNuxtApp()

    if ($gbClient === undefined) {
      console.error('GrowthBook client or context not found', $gbClient)
      return
    }

    console.log('GB Payload', $gbClient.getPayload())
    // const value = $gbClient.evalFeature(flagKey).value
    const value = $gbClient.getFeatureValue('poc-homepage-test-string', null)
    console.log('GB Test Feature Flag value', value)
  }
})

However, I’m getting

null

even though I can see the

poc-homepage-test-string

feature flag value in the

payload

which I console log just before I call

getFeatureValue

. I’ve tried using

evalFeature

as well but same issue (I’m not sure which is the correct one to use because in the code it says

getFeatureValue

is depricated, rather use

evalFeature

but the Vue documentation says otherwise.

I'm glad you figured it out! I missed that you said "Nuxt" in your first message 🙃 and not Next. I've put it on my list to review the Vue docs and check on creating an integration guide for Nuxt.

Brilliant, thanks @strong-mouse-55694