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 (
+ <>
+
+ >
+ )
+}