https://www.growthbook.io/ logo
#ask-questions
Title
# ask-questions
b

better-byte-26469

08/08/2022, 9:04 AM
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:
🙋‍♂️ 1
e

eager-rainbow-87882

08/08/2022, 12:24 PM
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:
Copy code
<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:
Copy code
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:
Copy code
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.
      })
    }
  }
}
b

better-byte-26469

08/08/2022, 12:42 PM
@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:
I have one more question not related to this code. My app is using Matomo and I wanted to connect it with GrowthBook before I create an experiment. Does that mean I need to add new Data Source (from Matomo)?
e

eager-rainbow-87882

08/08/2022, 12:58 PM
Sorry @better-byte-26469, I have no experience with Matomo to help in that part.
b

better-byte-26469

08/08/2022, 1:33 PM
No problem, thank you very much for your help @eager-rainbow-87882
10 Views