@posthog/nuxt 1.3.24 → 1.4.0

package/README.md

@@ -53,6 +53,67 @@ export default defineNuxtConfig({
 const { $posthog } = useNuxtApp()
 ```
 
+## Composables
+
+The module provides auto-imported composables for working with feature flags:
+
+### `usePostHog()`
+
+Returns the PostHog client instance.
+
+```vue
+<script setup>
+const posthog = usePostHog()
+
+posthog.capture('event_name')
+</script>
+```
+
+### `useFeatureFlagEnabled(flag: string)`
+
+Returns a reactive ref that checks if a feature flag is enabled (returns `true`/`false`/`undefined`).
+
+```vue
+<script setup>
+const isEnabled = useFeatureFlagEnabled('my-flag')
+</script>
+
+<template>
+  <div v-if="isEnabled">Feature is enabled!</div>
+</template>
+```
+
+### `useFeatureFlagVariantKey(flag: string)`
+
+Returns a reactive ref containing the feature flag value/variant (returns the variant string, `true`/`false`, or `undefined`).
+
+```vue
+<script setup>
+const variant = useFeatureFlagVariantKey('my-flag')
+</script>
+
+<template>
+  <div v-if="variant === 'variant-a'">Show variant A</div>
+  <div v-else-if="variant === 'variant-b'">Show variant B</div>
+</template>
+```
+
+### `useFeatureFlagPayload(flag: string)`
+
+Returns a reactive ref containing the feature flag payload (returns any JSON value or `undefined`).
+
+```vue
+<script setup>
+const payload = useFeatureFlagPayload('config-flag')
+</script>
+
+<template>
+  <div v-if="payload">Config value: {{ payload.value }}</div>
+</template>
+```
+
+All these composables automatically update when feature flags are loaded or changed.
+
 4. On the server side, the PostHog client instance initialized by the plugin is intended exclusively for error tracking. If you require additional PostHog client functionality for other purposes, please instantiate a separate client within your application as needed.
 
 ## FAQ

package/dist/module.d.mts

@@ -11,6 +11,7 @@ interface SourcemapsConfig {
     project?: string;
     logLevel?: LogLevel;
     deleteAfterUpload?: boolean;
+    batchSize?: number;
 }
 interface ModuleOptions {
     host: string;

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=3.7.0"
   },
-  "version": "1.3.24",
+  "version": "1.4.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "unknown"

package/dist/module.mjs

@@ -1,4 +1,4 @@
-import { defineNuxtModule, createResolver, addPlugin, addServerPlugin } from '@nuxt/kit';
+import { defineNuxtModule, createResolver, addPlugin, addServerPlugin, addImportsDir } from '@nuxt/kit';
 import { resolveBinaryPath, spawnLocal } from '@posthog/core/process';
 import { fileURLToPath } from 'node:url';
 import { dirname } from 'node:path';
@@ -23,6 +23,7 @@ const module$1 = defineNuxtModule({
     const resolver = createResolver(import.meta.url);
     addPlugin(resolver.resolve("./runtime/vue-plugin"));
     addServerPlugin(resolver.resolve("./runtime/nitro-plugin"));
+    addImportsDir(resolver.resolve("./runtime/composables"));
     Object.assign(nuxt.options.runtimeConfig.public, {
       posthog: {
         publicKey: options.publicKey,
@@ -120,6 +121,9 @@ function getUploadArgs(directory, sourcemapsConfig) {
   if (sourcemapsConfig.deleteAfterUpload ?? true) {
     processOptions.push("--delete-after");
   }
+  if (sourcemapsConfig.batchSize) {
+    processOptions.push("--batch-size", sourcemapsConfig.batchSize.toString());
+  }
   return processOptions;
 }
 

package/dist/runtime/composables/useFeatureFlagEnabled.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Check if a feature flag is enabled
+ *
+ * @remarks
+ * This composable initializes with the current feature flag value and automatically
+ * updates when PostHog feature flags are reloaded.
+ *
+ * **Server-Side Rendering (SSR) Behavior:**
+ * - During SSR, PostHog is typically not available or feature flags are not yet loaded
+ * - The returned ref will be `undefined` on the server side
+ * - The ref will be properly hydrated on the client side once PostHog initializes
+ * - Consider using a fallback value or `v-if` directive when rendering based on this value
+ *
+ * @example
+ * ```ts
+ * const isEnabled = useFeatureFlagEnabled('my-flag')
+ * ```
+ *
+ * @param flag - The feature flag key
+ * @returns A reactive ref containing the feature flag enabled state (boolean | undefined)
+ */
+export declare function useFeatureFlagEnabled(flag: string): import("vue").Ref<boolean | undefined, boolean | undefined>;

package/dist/runtime/composables/useFeatureFlagEnabled.js

@@ -0,0 +1,18 @@
+import { ref, onMounted, onUnmounted } from "vue";
+import { usePostHog } from "./usePostHog.js";
+export function useFeatureFlagEnabled(flag) {
+  const posthog = usePostHog();
+  const featureEnabled = ref(posthog?.isFeatureEnabled?.(flag));
+  let unsubscribe;
+  onMounted(() => {
+    if (!posthog) return;
+    featureEnabled.value = posthog.isFeatureEnabled(flag);
+    unsubscribe = posthog.onFeatureFlags?.(() => {
+      featureEnabled.value = posthog.isFeatureEnabled(flag);
+    });
+  });
+  onUnmounted(() => {
+    unsubscribe?.();
+  });
+  return featureEnabled;
+}

package/dist/runtime/composables/useFeatureFlagPayload.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Get the payload of a feature flag
+ *
+ * @remarks
+ * This composable initializes with the current feature flag payload and automatically
+ * updates when PostHog feature flags are reloaded.
+ *
+ * **Server-Side Rendering (SSR) Behavior:**
+ * - During SSR, PostHog is typically not available or feature flags are not yet loaded
+ * - The returned ref will be `undefined` on the server side
+ * - The ref will be properly hydrated on the client side once PostHog initializes
+ * - Consider using a fallback value or `v-if` directive when rendering based on this value
+ *
+ * @example
+ * ```ts
+ * const payload = useFeatureFlagPayload('my-flag')
+ * ```
+ *
+ * @param flag - The feature flag key
+ * @returns A reactive ref containing the feature flag payload
+ */
+export declare function useFeatureFlagPayload(flag: string): import("vue").Ref<any, any>;

package/dist/runtime/composables/useFeatureFlagPayload.js

@@ -0,0 +1,18 @@
+import { ref, onMounted, onUnmounted } from "vue";
+import { usePostHog } from "./usePostHog.js";
+export function useFeatureFlagPayload(flag) {
+  const posthog = usePostHog();
+  const featureFlagPayload = ref(posthog?.getFeatureFlagPayload?.(flag));
+  let unsubscribe;
+  onMounted(() => {
+    if (!posthog) return;
+    featureFlagPayload.value = posthog.getFeatureFlagPayload(flag);
+    unsubscribe = posthog.onFeatureFlags?.(() => {
+      featureFlagPayload.value = posthog.getFeatureFlagPayload(flag);
+    });
+  });
+  onUnmounted(() => {
+    unsubscribe?.();
+  });
+  return featureFlagPayload;
+}

package/dist/runtime/composables/useFeatureFlagVariantKey.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Get the value/variant of a feature flag
+ *
+ * @remarks
+ * This composable initializes with the current feature flag variant key and automatically
+ * updates when PostHog feature flags are reloaded.
+ *
+ * **Server-Side Rendering (SSR) Behavior:**
+ * - During SSR, PostHog is typically not available or feature flags are not yet loaded
+ * - The returned ref will be `undefined` on the server side
+ * - The ref will be properly hydrated on the client side once PostHog initializes
+ * - Consider using a fallback value or `v-if` directive when rendering based on this value
+ *
+ * @example
+ * ```ts
+ * const variant = useFeatureFlagVariantKey('my-flag')
+ * ```
+ *
+ * @param flag - The feature flag key
+ * @returns A reactive ref containing the feature flag value (string | boolean | undefined)
+ */
+export declare function useFeatureFlagVariantKey(flag: string): import("vue").Ref<string | boolean | undefined, string | boolean | undefined>;

package/dist/runtime/composables/useFeatureFlagVariantKey.js

@@ -0,0 +1,18 @@
+import { ref, onMounted, onUnmounted } from "vue";
+import { usePostHog } from "./usePostHog.js";
+export function useFeatureFlagVariantKey(flag) {
+  const posthog = usePostHog();
+  const featureFlagVariantKey = ref(posthog?.getFeatureFlag?.(flag));
+  let unsubscribe;
+  onMounted(() => {
+    if (!posthog) return;
+    featureFlagVariantKey.value = posthog.getFeatureFlag(flag);
+    unsubscribe = posthog.onFeatureFlags?.(() => {
+      featureFlagVariantKey.value = posthog.getFeatureFlag(flag);
+    });
+  });
+  onUnmounted(() => {
+    unsubscribe?.();
+  });
+  return featureFlagVariantKey;
+}

package/dist/runtime/composables/usePostHog.d.ts

@@ -0,0 +1,17 @@
+import type posthog from 'posthog-js';
+/**
+ * Get the PostHog client instance
+ *
+ * @remarks
+ * This composable provides access to the PostHog client instance initialized.
+ * It returns `undefined` on the server side or if PostHog is not yet initialized.
+ *
+ * @example
+ * ```ts
+ * const posthog = usePostHog()
+ * posthog.capture('event')
+ * ```
+ *
+ * @returns The PostHog client instance
+ */
+export declare function usePostHog(): typeof posthog | undefined;

package/dist/runtime/composables/usePostHog.js

@@ -0,0 +1,5 @@
+import { useNuxtApp } from "#app";
+export function usePostHog() {
+  const { $posthog } = useNuxtApp();
+  return $posthog?.();
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@posthog/nuxt",
-  "version": "1.3.24",
+  "version": "1.4.0",
   "description": "Nuxt module for Posthog 🦔",
   "repository": {
     "type": "git",
@@ -20,11 +20,11 @@
     "dist"
   ],
   "dependencies": {
-    "@posthog/cli": "~0.5.17",
+    "@posthog/cli": "~0.5.20",
     "@nuxt/kit": ">=3.7.0",
-    "posthog-node": "5.17.3",
-    "@posthog/core": "1.8.0",
-    "posthog-js": "1.309.0"
+    "posthog-node": "5.18.0",
+    "@posthog/core": "1.9.0",
+    "posthog-js": "1.310.0"
   },
   "devDependencies": {
     "@types/node": "^20.0.0",