search

mitjans / nuxt-posthog

Posthog module for Nuxt
https://nuxt-posthog.cmitjans.dev
MIT License
27 stars 3 forks source link

Can't capture custom events using v-directive #53

Open IzakJackson opened 1 week ago

IzakJackson commented 1 week ago

Hi,

I'm trying to capture custom events using the v-directive:

<UButton
          v-posthog-capture="'book_now_clicked'"
          size="xl"
          class="w-full cursor-pointer justify-center text-center"
        >
          Enquire Now
        </UButton>

No custom events are showing in my Posthog dashboard.

I'm using Nuxt ui3 for the button if that helps.

mitjans commented 6 days ago

I can't reproduce, can you provide more context?

IzakJackson commented 6 days ago

When clicking the button with the v-directive, the event isn't logged in my posthog dashboard. This happens for all uses of it throughout my app.

Page views, session replay etc. all work for me, just not v-posthog-capture.

Is there any additional setup to use v-posthog-capture? My assumption is that if posthog is setup on the project I can use the v-diredctive without importing into the component, or is importing required?

mitjans commented 5 days ago

Is it possible that this has something to do with your issue?

I'm not very familiar with Nuxt UI and I don't know internally what UButton looks like. Maybe the directive is being added to an undesired html tag, and not the actual button

IzakJackson commented 4 days ago

I think it might be.

<UButton> has a root of <ULink>, which has a root of <NuxtLink>.

Using just <NuxtLink> logs my custom events.

mitjans commented 2 days ago

Thank you for clarifying that. We can probably mention this in the documentation, as it can happen to more people. Also, it's not something we can fix, but a Vue restriction.

IzakJackson commented 2 days ago

Nuxt ui3 is based on radix-vue I believe, so may be a recurring issue with other UI libraries based on it.

My workaround is to use @click and call capture in a function instead.