nuxt

frontend/src/scenes/onboarding/sdks/feature-flags/FeatureFlagsSDKInstructions.tsx

@@ -14,6 +14,7 @@ import {
     FeatureFlagsLaravelInstructions,
     FeatureFlagsNextJSInstructions,
     FeatureFlagsNodeInstructions,
+    FeatureFlagsNuxtJSInstructions,
     FeatureFlagsPHPInstructions,
     FeatureFlagsPythonInstructions,
     FeatureFlagsReactInstructions,
@@ -35,6 +36,7 @@ export const FeatureFlagsSDKInstructions: SDKInstructionsMap = {
     [SDKKey.LARAVEL]: FeatureFlagsLaravelInstructions,
     [SDKKey.NEXT_JS]: FeatureFlagsNextJSInstructions,
     [SDKKey.NODE_JS]: FeatureFlagsNodeInstructions,
+    [SDKKey.NUXT_JS]: FeatureFlagsNuxtJSInstructions,
     [SDKKey.PHP]: FeatureFlagsPHPInstructions,
     [SDKKey.PYTHON]: FeatureFlagsPythonInstructions,
     [SDKKey.REACT]: FeatureFlagsReactInstructions,

frontend/src/scenes/onboarding/sdks/feature-flags/index.tsx

@@ -11,6 +11,7 @@ export * from './js-web'
 export * from './laravel'
 export * from './next-js'
 export * from './nodejs'
+export * from './nuxt'
 export * from './php'
 export * from './python'
 export * from './react'

frontend/src/scenes/onboarding/sdks/feature-flags/nuxt.tsx

@@ -0,0 +1,21 @@
+import { SDKKey } from '~/types'
+
+import { NodeInstallSnippet, NodeSetupSnippet } from '../sdk-install-instructions'
+import { SDKInstallNuxtJSInstructions } from '../sdk-install-instructions/nuxt'
+import { FlagImplementationSnippet } from './flagImplementationSnippet'
+
+export function FeatureFlagsNuxtJSInstructions(): JSX.Element {
+    return (
+        <>
+            <SDKInstallNuxtJSInstructions />
+            <h3>Client-side rendering</h3>
+            <FlagImplementationSnippet sdkKey={SDKKey.REACT} />
+            <h3>Server-side rendering</h3>
+            <h4>Install</h4>
+            <NodeInstallSnippet />
+            <h4>Configure</h4>
+            <NodeSetupSnippet />
+            <FlagImplementationSnippet sdkKey={SDKKey.NODE_JS} />
+        </>
+    )
+}

frontend/src/scenes/onboarding/sdks/product-analytics/ProductAnalyticsSDKInstructions.tsx

@@ -16,6 +16,7 @@ import {
     ProductAnalyticsLaravelInstructions,
     ProductAnalyticsNextJSInstructions,
     ProductAnalyticsNodeInstructions,
+    ProductAnalyticsNuxtJSInstructions,
     ProductAnalyticsPHPInstructions,
     ProductAnalyticsPythonInstructions,
     ProductAnalyticsRNInstructions,
@@ -38,6 +39,7 @@ export const ProductAnalyticsSDKInstructions: SDKInstructionsMap = {
     [SDKKey.LARAVEL]: ProductAnalyticsLaravelInstructions,
     [SDKKey.NEXT_JS]: ProductAnalyticsNextJSInstructions,
     [SDKKey.NODE_JS]: ProductAnalyticsNodeInstructions,
+    [SDKKey.NUXT_JS]: ProductAnalyticsNuxtJSInstructions,
     [SDKKey.PHP]: ProductAnalyticsPHPInstructions,
     [SDKKey.PYTHON]: ProductAnalyticsPythonInstructions,
     [SDKKey.REACT_NATIVE]: ProductAnalyticsRNInstructions,

frontend/src/scenes/onboarding/sdks/product-analytics/index.tsx

@@ -13,6 +13,7 @@ export * from './js-web'
 export * from './laravel'
 export * from './next-js'
 export * from './nodejs'
+export * from './nuxt'
 export * from './php'
 export * from './python'
 export * from './react-native'

frontend/src/scenes/onboarding/sdks/product-analytics/nuxt.tsx

@@ -0,0 +1,14 @@
+import { LemonDivider } from '@posthog/lemon-ui'
+
+import { SDKInstallNuxtJSInstructions } from '../sdk-install-instructions/nuxt'
+import { ProductAnalyticsAllJSFinalSteps } from './AllJSFinalSteps'
+
+export function ProductAnalyticsNuxtJSInstructions(): JSX.Element {
+    return (
+        <>
+            <SDKInstallNuxtJSInstructions />
+            <LemonDivider thick dashed className="my-4" />
+            <ProductAnalyticsAllJSFinalSteps />
+        </>
+    )
+}

frontend/src/scenes/onboarding/sdks/sdk-install-instructions/index.tsx

@@ -10,6 +10,7 @@ export * from './ios'
 export * from './js-web'
 export * from './laravel'
 export * from './nodejs'
+export * from './nuxt'
 export * from './php'
 export * from './python'
 export * from './react-native'

frontend/src/scenes/onboarding/sdks/sdk-install-instructions/nuxt.tsx

@@ -0,0 +1,125 @@
+import { useValues } from 'kea'
+import { CodeSnippet, Language } from 'lib/components/CodeSnippet'
+import { Link } from 'lib/lemon-ui/Link'
+import { apiHostOrigin } from 'lib/utils/apiHost'
+import { teamLogic } from 'scenes/teamLogic'
+
+import { JSInstallSnippet } from './js-web'
+import { NodeInstallSnippet } from './nodejs'
+
+function NuxtEnvVarsSnippet(): JSX.Element {
+    const { currentTeam } = useValues(teamLogic)
+
+    return (
+        <CodeSnippet language={Language.JavaScript}>
+            {`export default defineNuxtConfig({
+                runtimeConfig: {
+                  public: {
+                    posthogPublicKey: '${currentTeam?.api_token}',
+                    posthogHost: '${apiHostOrigin()}'
+                  }
+                }
+              })`}
+        </CodeSnippet>
+    )
+}
+
+function NuxtAppClientCodeSnippet(): JSX.Element {
+    return (
+        <CodeSnippet language={Language.JavaScript}>
+            {`import { defineNuxtPlugin } from '#app'
+import posthog from 'posthog-js'
+export default defineNuxtPlugin(nuxtApp => {
+  const runtimeConfig = useRuntimeConfig();
+  const posthogClient = posthog.init(runtimeConfig.public.posthogPublicKey, {
+    api_host: runtimeConfig.public.posthogHost',
+    capture_pageview: false, // we add manual pageview capturing below
+    loaded: (posthog) => {
+      if (import.meta.env.MODE === 'development') posthog.debug();
+    }
+  })
+
+  // Make sure that pageviews are captured with each route change
+  const router = useRouter();
+  router.afterEach((to) => {
+    nextTick(() => {
+      posthog.capture('$pageview', {
+        current_url: to.fullPath
+      });
+    });
+  });
+
+  return {
+    provide: {
+      posthog: () => posthogClient
+    }
+  }
+})`}
+        </CodeSnippet>
+    )
+}
+
+function NuxtAppServerCode(): JSX.Element {
+    return (
+        <CodeSnippet language={Language.JavaScript}>
+            {`<!-- ...rest of code -->
+
+<script setup>
+import { useAsyncData, useCookie, useRuntimeConfig } from 'nuxt/app';
+import { PostHog } from 'posthog-node';
+
+const { data: someData, error } = await useAsyncData('example', async () => {
+  const runtimeConfig = useRuntimeConfig();
+  const posthog = new PostHog(
+    runtimeConfig.public.posthogPublicKey,
+    { host: runtimeConfig.public.posthogHost }
+  );
+
+  // rest of your code
+
+});
+
+</script>`}
+        </CodeSnippet>
+    )
+}
+
+export function SDKInstallNuxtJSInstructions(): JSX.Element {
+    return (
+        <>
+            <p>
+                The below guide is for Nuxt v3.0 and above. For Nuxt v2.16 and below, see our{' '}
+                <Link to="https://posthog.com/docs/libraries/nuxt-js#nuxt-v216-and-below">Nuxt docs</Link>
+            </p>
+            <h3>Install posthog-js using your package manager</h3>
+            <JSInstallSnippet />
+            <h3>Add environment variables</h3>
+            <p>
+                Add your PostHog API key and host to your <code>nuxt.config.js</code> file.
+            </p>
+            <NuxtEnvVarsSnippet />
+
+            <h3>Create a plugin</h3>
+            <p>
+                Create a new plugin by creating a new file <code>posthog.client.js</code> in your{' '}
+                <Link to="https://nuxt.com/docs/guide/directory-structure/plugins" target="_blank">
+                    plugins directory
+                </Link>
+                :
+            </p>
+            <NuxtAppClientCodeSnippet />
+            <h3>Server-side integration</h3>
+            <p>Install posthog-node using your package manager</p>
+            <NodeInstallSnippet />
+            <h3>Server-side initialization</h3>
+            <p>
+                Initialize the PostHog Node client where you'd like to use it on the server side. For example, in{' '}
+                <Link to="https://nuxt.com/docs/api/composables/use-async-data" target="_blank">
+                    useAsyncData
+                </Link>
+                :{' '}
+            </p>
+            <NuxtAppServerCode />
+        </>
+    )
+}

frontend/src/scenes/onboarding/sdks/session-replay/SessionReplaySDKInstructions.tsx

@@ -8,6 +8,7 @@ import {
     HTMLSnippetInstructions,
     JSWebInstructions,
     NextJSInstructions,
+    NuxtJSInstructions,
     ReactInstructions,
 } from '.'
 
@@ -19,5 +20,6 @@ export const SessionReplaySDKInstructions: SDKInstructionsMap = {
     [SDKKey.BUBBLE]: BubbleInstructions,
     [SDKKey.FRAMER]: FramerInstructions,
     [SDKKey.NEXT_JS]: NextJSInstructions,
+    [SDKKey.NUXT_JS]: NuxtJSInstructions,
     [SDKKey.REACT]: ReactInstructions,
 }

frontend/src/scenes/onboarding/sdks/session-replay/index.tsx

@@ -5,4 +5,5 @@ export * from './framer'
 export * from './html-snippet'
 export * from './js-web'
 export * from './next-js'
+export * from './nuxt'
 export * from './react'

frontend/src/scenes/onboarding/sdks/session-replay/nuxt.tsx

@@ -0,0 +1,11 @@
+import { SDKInstallNuxtJSInstructions } from '../sdk-install-instructions/nuxt'
+import { SessionReplayFinalSteps } from '../shared-snippets'
+
+export function NuxtJSInstructions(): JSX.Element {
+    return (
+        <>
+            <SDKInstallNuxtJSInstructions />
+            <SessionReplayFinalSteps />
+        </>
+    )
+}

frontend/src/scenes/onboarding/sdks/surveys/SurveysSDKInstructions.tsx

@@ -8,6 +8,7 @@ import {
     HTMLSnippetInstructions,
     JSWebInstructions,
     NextJSInstructions,
+    NuxtJSInstructions,
     ReactInstructions,
 } from '.'
 
@@ -19,5 +20,6 @@ export const SurveysSDKInstructions: SDKInstructionsMap = {
     [SDKKey.BUBBLE]: BubbleInstructions,
     [SDKKey.FRAMER]: FramerInstructions,
     [SDKKey.NEXT_JS]: NextJSInstructions,
+    [SDKKey.NUXT_JS]: NuxtJSInstructions,
     [SDKKey.REACT]: ReactInstructions,
 }

frontend/src/scenes/onboarding/sdks/surveys/index.tsx

@@ -5,4 +5,5 @@ export * from './framer'
 export * from './html-snippet'
 export * from './js-web'
 export * from './next-js'
+export * from './nuxt'
 export * from './react'

frontend/src/scenes/onboarding/sdks/surveys/nuxt.tsx

@@ -0,0 +1,9 @@
+import { SDKInstallNuxtJSInstructions } from '../sdk-install-instructions/nuxt'
+
+export function NuxtJSInstructions(): JSX.Element {
+    return (
+        <>
+            <SDKInstallNuxtJSInstructions />
+        </>
+    )
+}