From fcd7bb02fd1f78b3b56ff977c10eda0baef349eb Mon Sep 17 00:00:00 2001 From: Carles Mitjans Date: Wed, 4 Dec 2024 13:02:49 +0100 Subject: [PATCH] docs: cite vue documentation on using directives with custom components --- docs/content/3.features.md | 28 +++++++++++++++++++--------- 1 file changed, 19 insertions(+), 9 deletions(-) diff --git a/docs/content/3.features.md b/docs/content/3.features.md index 7700398..0d65e2f 100644 --- a/docs/content/3.features.md +++ b/docs/content/3.features.md @@ -50,6 +50,17 @@ Nuxt PostHog provides a [Vue directive](https://vuejs.org/guide/reusability/cust ☝️ Whenever this button is clicked, an event will be sent to PostHog automatically :: +::callout +--- +icon: i-heroicons-exclamation-triangle +color: amber +--- + +You might find that the event is not being triggered when using the directive on a custom component. Citing [Vue official documentation](https://vuejs.org/guide/reusability/custom-directives#usage-on-components): + +> Using custom directives on components is not recommended. Unexpected behaviour may occur when a component has multiple root nodes. +:: + This directive also accepts an object if you want to provide additional properties to this event: ```vue [app.vue] @@ -65,6 +76,14 @@ This directive also accepts an object if you want to provide additional properti ``` +::callout +--- +icon: i-heroicons-sparkles +--- + +This directive is typed and will provide suggestions while coding +:: + ### Listen to custom events You can listen to custom events (other than the default `click`) by passing in the event to the directive as an argument: @@ -77,15 +96,6 @@ You can listen to custom events (other than the default `click`) by passing in t ``` -::callout ---- - -icon: i-heroicons-sparkles ---- - -This directive is typed and will provide suggestions while coding -:: - ### Auto-capture page views By default, this module will capture page views automatically. If not desired, you can change this behavior: