Hello everyone, I'm new with GrowthBook and I'm trying to implement it in my NuxtJS project. Is there anyone who worked with Nuxt before? Maybe stupid question but for me this code is not working:

Hey @better-byte-26469, here we integrated with Nuxt as well, and the ideia was exactly on creating a plugin. Some tricks I'd like to share: • Fetching features is an async call, so you won't have the features already loaded in the next line of code... To bypass this situation: ◦ We chose to attach a

loading

state to the GrowthBook instance, with

Vue.set

(to turn it reactive), just before the call to load the features:

Vue.set($growthbook, 'loading', true)

◦ When the

fetch

is completed (inside the

then

), you can update the reactive state:

Vue.set($growthbook, 'loading', false)

• As usual with Nuxt plugins, we also inject the GrowthBook instance to the Nuxt root to expose it everywhere automatically:

inject('growthbook', Vue.observable($growthbook))

• This way, anywhere in your application you may need to check for features, you can use the injected

$growthbook

and reactively update your templates based on the

loading

state plus the desired feature:

<div v-if="!$growthbook.loading && $growthbook.isOn('some-feature')">
The feature is enabled!
</div>

• You can also leverage the reactivity to

watch

the

loading

state if you need to do anything in the script instead of the template of any component/page of your application:

watch: {
  '$growthbook.loading'() {
    if (this.$growthbook.isOn('dark-mode')) {
      localStorage['color-mode'] = 'dark'
    } else {
      localStorage.removeItem('color-mode')
    }
  }
}

• Bonus tip: Another important part of dealing with GrowthBook is to keep its attributes updated regarding the current state of the application (specially when it comes to the user state), to allow complex conditions to enable/disable features. So remember to update attributes with

setAttributes

when user logs in/out, or just watch some global user state, if you have it, then update attributes anytime it changes:

watch: {
  // We have a global `currentUser` state shared in all our components/pages.
  currentUser: {
    deep: true,
    handler(currentUser) {
      this.$growthbook.setAttributes({
        ..this.$growthbook.getAttributes(),
        uid: currentUser?.uid ?? null,
        email: currentUser?.email ?? null,
        authenticated: !!currentUser
        // Anything else you want to use from your users as an attribute.
      })
    }
  }
}

@eager-rainbow-87882 Thank you so much for the reply!! I will try with the loading. I did included GrowthBook as plugin and have it in my nuxt.config.js file:

Sorry @better-byte-26469, I have no experience with Matomo to help in that part.

No problem, thank you very much for your help @eager-rainbow-87882