From 5978d1e57face58a7fed817b0b896bf8b75f562f Mon Sep 17 00:00:00 2001 From: Lior Date: Thu, 21 Mar 2024 20:54:09 +0000 Subject: [PATCH] nuxt --- .../FeatureFlagsSDKInstructions.tsx | 2 + .../onboarding/sdks/feature-flags/index.tsx | 1 + .../onboarding/sdks/feature-flags/nuxt.tsx | 21 +++ .../ProductAnalyticsSDKInstructions.tsx | 2 + .../sdks/product-analytics/index.tsx | 1 + .../sdks/product-analytics/nuxt.tsx | 14 ++ .../sdks/sdk-install-instructions/index.tsx | 1 + .../sdks/sdk-install-instructions/nuxt.tsx | 125 ++++++++++++++++++ .../SessionReplaySDKInstructions.tsx | 2 + .../onboarding/sdks/session-replay/index.tsx | 1 + .../onboarding/sdks/session-replay/nuxt.tsx | 11 ++ .../sdks/surveys/SurveysSDKInstructions.tsx | 2 + .../scenes/onboarding/sdks/surveys/index.tsx | 1 + .../scenes/onboarding/sdks/surveys/nuxt.tsx | 9 ++ 14 files changed, 193 insertions(+) create mode 100644 frontend/src/scenes/onboarding/sdks/feature-flags/nuxt.tsx create mode 100644 frontend/src/scenes/onboarding/sdks/product-analytics/nuxt.tsx create mode 100644 frontend/src/scenes/onboarding/sdks/sdk-install-instructions/nuxt.tsx create mode 100644 frontend/src/scenes/onboarding/sdks/session-replay/nuxt.tsx create mode 100644 frontend/src/scenes/onboarding/sdks/surveys/nuxt.tsx diff --git a/frontend/src/scenes/onboarding/sdks/feature-flags/FeatureFlagsSDKInstructions.tsx b/frontend/src/scenes/onboarding/sdks/feature-flags/FeatureFlagsSDKInstructions.tsx index 578f825180b754..0e3180574bf23a 100644 --- a/frontend/src/scenes/onboarding/sdks/feature-flags/FeatureFlagsSDKInstructions.tsx +++ b/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, diff --git a/frontend/src/scenes/onboarding/sdks/feature-flags/index.tsx b/frontend/src/scenes/onboarding/sdks/feature-flags/index.tsx index aa6f5b23349638..49bfbcffc25cdd 100644 --- a/frontend/src/scenes/onboarding/sdks/feature-flags/index.tsx +++ b/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' diff --git a/frontend/src/scenes/onboarding/sdks/feature-flags/nuxt.tsx b/frontend/src/scenes/onboarding/sdks/feature-flags/nuxt.tsx new file mode 100644 index 00000000000000..2d0854bd3011a6 --- /dev/null +++ b/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 ( + <> + +

Client-side rendering

+ +

Server-side rendering

+

Install

+ +

Configure

+ + + + ) +} diff --git a/frontend/src/scenes/onboarding/sdks/product-analytics/ProductAnalyticsSDKInstructions.tsx b/frontend/src/scenes/onboarding/sdks/product-analytics/ProductAnalyticsSDKInstructions.tsx index 623d121fd8ac3a..2358fda95b985d 100644 --- a/frontend/src/scenes/onboarding/sdks/product-analytics/ProductAnalyticsSDKInstructions.tsx +++ b/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, diff --git a/frontend/src/scenes/onboarding/sdks/product-analytics/index.tsx b/frontend/src/scenes/onboarding/sdks/product-analytics/index.tsx index db616a6fb991a3..2097428dc5fa23 100644 --- a/frontend/src/scenes/onboarding/sdks/product-analytics/index.tsx +++ b/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' diff --git a/frontend/src/scenes/onboarding/sdks/product-analytics/nuxt.tsx b/frontend/src/scenes/onboarding/sdks/product-analytics/nuxt.tsx new file mode 100644 index 00000000000000..5c5a3fb6a84958 --- /dev/null +++ b/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 ( + <> + + + + + ) +} diff --git a/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/index.tsx b/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/index.tsx index 066f392c90ccd4..e349d8437def20 100644 --- a/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/index.tsx +++ b/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' diff --git a/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/nuxt.tsx b/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/nuxt.tsx new file mode 100644 index 00000000000000..cb6ae59a6bbd66 --- /dev/null +++ b/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 ( + + {`export default defineNuxtConfig({ + runtimeConfig: { + public: { + posthogPublicKey: '${currentTeam?.api_token}', + posthogHost: '${apiHostOrigin()}' + } + } + })`} + + ) +} + +function NuxtAppClientCodeSnippet(): JSX.Element { + return ( + + {`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 + } + } +})`} + + ) +} + +function NuxtAppServerCode(): JSX.Element { + return ( + + {` + +`} + + ) +} + +export function SDKInstallNuxtJSInstructions(): JSX.Element { + return ( + <> +

+ The below guide is for Nuxt v3.0 and above. For Nuxt v2.16 and below, see our{' '} + Nuxt docs +

+

Install posthog-js using your package manager

+ +

Add environment variables

+

+ Add your PostHog API key and host to your nuxt.config.js file. +

+ + +

Create a plugin

+

+ Create a new plugin by creating a new file posthog.client.js in your{' '} + + plugins directory + + : +

+ +

Server-side integration

+

Install posthog-node using your package manager

+ +

Server-side initialization

+

+ Initialize the PostHog Node client where you'd like to use it on the server side. For example, in{' '} + + useAsyncData + + :{' '} +

+ + + ) +} diff --git a/frontend/src/scenes/onboarding/sdks/session-replay/SessionReplaySDKInstructions.tsx b/frontend/src/scenes/onboarding/sdks/session-replay/SessionReplaySDKInstructions.tsx index d47f23ac44f70a..0abbf8fa20d632 100644 --- a/frontend/src/scenes/onboarding/sdks/session-replay/SessionReplaySDKInstructions.tsx +++ b/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, } diff --git a/frontend/src/scenes/onboarding/sdks/session-replay/index.tsx b/frontend/src/scenes/onboarding/sdks/session-replay/index.tsx index c4890ce7e04115..dc4772ac4f7800 100644 --- a/frontend/src/scenes/onboarding/sdks/session-replay/index.tsx +++ b/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' diff --git a/frontend/src/scenes/onboarding/sdks/session-replay/nuxt.tsx b/frontend/src/scenes/onboarding/sdks/session-replay/nuxt.tsx new file mode 100644 index 00000000000000..0be9db5e22aa9f --- /dev/null +++ b/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 ( + <> + + + + ) +} diff --git a/frontend/src/scenes/onboarding/sdks/surveys/SurveysSDKInstructions.tsx b/frontend/src/scenes/onboarding/sdks/surveys/SurveysSDKInstructions.tsx index 9c425302958273..c047de4c745a9a 100644 --- a/frontend/src/scenes/onboarding/sdks/surveys/SurveysSDKInstructions.tsx +++ b/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, } diff --git a/frontend/src/scenes/onboarding/sdks/surveys/index.tsx b/frontend/src/scenes/onboarding/sdks/surveys/index.tsx index c4890ce7e04115..dc4772ac4f7800 100644 --- a/frontend/src/scenes/onboarding/sdks/surveys/index.tsx +++ b/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' diff --git a/frontend/src/scenes/onboarding/sdks/surveys/nuxt.tsx b/frontend/src/scenes/onboarding/sdks/surveys/nuxt.tsx new file mode 100644 index 00000000000000..ceddb9c49744d1 --- /dev/null +++ b/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 ( + <> + + + ) +}