Hello everyone, I'm new with GrowthBook and I'm tr...
# ask-questions
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
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
state to the GrowthBook instance, with
(to turn it reactive), just before the call to load the features:
Vue.set($growthbook, 'loading', true)
◦ When the
is completed (inside the
), 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
and reactively update your templates based on the
state plus the desired feature:
Copy code
<div v-if="!$growthbook.loading && $growthbook.isOn('some-feature')">
The feature is enabled!
• You can also leverage the reactivity to
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 {
• 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
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) {
        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:
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)?
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