Hi. Has anyone able to successfully use GB in Nuxt...
# ask-questions
b
Hi. Has anyone able to successfully use GB in Nuxt 2? I'm having an issue where I can see the features in localStorage but no matter what I do, getFeatureValue and isOn is not working with the feature key. Even with the chrome extension, it is saying that there is no feature or experiment.
f
I know it works with Nuxt
seems like its making the network call?
could there be two instances somehow?
b
Hmm.. two instances of gb or the feature flag?
Found it
r
@breezy-king-73167 I am having some issues with a feature not working in Chrome. When you say “found it”, what was the cause of your issue / how did you fix it? Thanks
b
Apparently, you have to load the features first even though it was stored already in local storage. Add this to your plugin.
Copy code
await gb.loadFeatures({ autoRefresh: true });
r
Thanks for the tip
b
In case this can help, I created this simple boilerplate for Nuxt 2 and GA4/GTAG for our POC.
Copy code
import { GrowthBook } from '@growthbook/growthbook'

export default ({ env }, inject) => {
  let growthBook = null
  /**
   * For initializing Growthbook
   * @returns (null/Growthbook) Returns GrowthBook or null
   */
  const initGrowthBook = async function () {
    /* Prevent reinitializing Growthbook */
    if (growthBook) {
      return growthBook
    }

    /* Initialize Growthbook */
    growthBook = new GrowthBook({
      apiHost: env.GROWTHBOOK_API_HOST,
      clientKey: env.GROWTHBOOK_API_KEY,
      enableDevMode: env.NODE_ENV === 'development',
      trackingCallback: (experiment, result) => {
        // track using GA4
        if ("gtag" in window) {
          this.$gtag.query("event", "experiment_viewed", {
            event_category: "experiment",
            experiment_id: experiment.key,
            variation_id: result.variationId,
          })
        } else {
          console.warn("no gtag")
        }
      }
    })

    //Set user attributes
    await this.$gtag.query('get', env.GA4_TRACKING_ID, 'client_id', (client_id)=>{
      growthBook.setAttributes({
        country: 'france',
        id: client_id,
      })
    })

    /* Load Growthbook features */
    try {
      await growthBook.loadFeatures({
        autoRefresh: true,
        timeout: 2000,
      })

      return growthBook
    } catch (error) {
      console.error('Failed to load features from GrowthBook', error)
      return null
    }
  }

  inject('initGrowthBook', initGrowthBook)
f
Cool - we can add that to our docs - would you like to contribute it?
b
SLR. Sure. Haha. If it is alright? 🙂
f
Of course, we’re open source
b
Alright will do. Reading the CONTRIBUTING.md 🙂
a
@breezy-king-73167 I try to use this but it didn't work, it said
loadFeatures
is not a function, did you ever experience it?