vue

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

@@ -22,6 +22,7 @@ import {
     FeatureFlagsRNInstructions,
     FeatureFlagsRubyInstructions,
     FeatureFlagsSvelteInstructions,
+    FeatureFlagsVueInstructions,
     FeatureFlagsWebflowInstructions,
 } from '.'
 
@@ -47,5 +48,6 @@ export const FeatureFlagsSDKInstructions: SDKInstructionsMap = {
     [SDKKey.REMIX]: FeatureFlagsRemixJSInstructions,
     [SDKKey.RUBY]: FeatureFlagsRubyInstructions,
     [SDKKey.SVELTE]: FeatureFlagsSvelteInstructions,
+    [SDKKey.VUE_JS]: FeatureFlagsVueInstructions,
     [SDKKey.WEBFLOW]: FeatureFlagsWebflowInstructions,
 }

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

@@ -19,4 +19,5 @@ export * from './react-native'
 export * from './remix'
 export * from './ruby'
 export * from './svelte'
+export * from './vue'
 export * from './webflow'

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

@@ -0,0 +1,13 @@
+import { SDKKey } from '~/types'
+
+import { SDKInstallVueInstructions } from '../sdk-install-instructions/vue'
+import { FlagImplementationSnippet } from './flagImplementationSnippet'
+
+export function FeatureFlagsVueInstructions(): JSX.Element {
+    return (
+        <>
+            <SDKInstallVueInstructions />
+            <FlagImplementationSnippet sdkKey={SDKKey.JS_WEB} />
+        </>
+    )
+}

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

@@ -23,6 +23,7 @@ import {
     ProductAnalyticsRNInstructions,
     ProductAnalyticsRubyInstructions,
     ProductAnalyticsSvelteJSInstructions,
+    ProductAnalyticsVueInstructions,
     ProductAnalyticsWebflowInstructions,
 } from '.'
 
@@ -49,5 +50,6 @@ export const ProductAnalyticsSDKInstructions: SDKInstructionsMap = {
     [SDKKey.REMIX]: ProductAnalyticsRemixJSInstructions,
     [SDKKey.RUBY]: ProductAnalyticsRubyInstructions,
     [SDKKey.SVELTE]: ProductAnalyticsSvelteJSInstructions,
+    [SDKKey.VUE_JS]: ProductAnalyticsVueInstructions,
     [SDKKey.WEBFLOW]: ProductAnalyticsWebflowInstructions,
 }

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

@@ -20,4 +20,5 @@ export * from './react-native'
 export * from './remix'
 export * from './ruby'
 export * from './svelte'
+export * from './vue'
 export * from './webflow'

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

@@ -0,0 +1,11 @@
+import { SDKInstallVueInstructions } from '../sdk-install-instructions/vue'
+import { ProductAnalyticsAllJSFinalSteps } from './AllJSFinalSteps'
+
+export function ProductAnalyticsVueInstructions(): JSX.Element {
+    return (
+        <>
+            <SDKInstallVueInstructions />
+            <ProductAnalyticsAllJSFinalSteps />
+        </>
+    )
+}

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

@@ -17,4 +17,5 @@ export * from './react-native'
 export * from './remix'
 export * from './ruby'
 export * from './svelte'
+export * from './vue'
 export * from './webflow'

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

@@ -0,0 +1,78 @@
+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'
+
+function VueCreatePluginsFileSnippet(): JSX.Element {
+    return (
+        <CodeSnippet language={Language.Bash}>
+            {`mkdir plugins #skip if you already have one
+cd plugins 
+touch posthog.js`}
+        </CodeSnippet>
+    )
+}
+
+function VuePluginsCodeSnippet(): JSX.Element {
+    const { currentTeam } = useValues(teamLogic)
+
+    return (
+        <CodeSnippet language={Language.JavaScript}>
+            {`//./plugins/posthog.js
+import posthog from "posthog-js";
+
+export default {
+  install(app) {
+    app.config.globalProperties.$posthog = posthog.init(
+      '${currentTeam?.api_token}',
+      {
+        api_host: '${apiHostOrigin()}',
+      }
+    );
+  },
+};`}
+        </CodeSnippet>
+    )
+}
+
+function VueActivatePluginSnippet(): JSX.Element {
+    return (
+        <CodeSnippet language={Language.JavaScript}>
+            {`//main.js
+import { createApp } from 'vue'
+import App from './App.vue'
+import posthogPlugin from "./plugins/posthog"; //import the plugin. 
+
+const app = createApp(App);
+
+app.use(posthogPlugin); //install the plugin
+app.mount('#app')`}
+        </CodeSnippet>
+    )
+}
+
+export function SDKInstallVueInstructions(): JSX.Element {
+    return (
+        <>
+            <p>
+                The below guide is for integrating using plugins in Vue versions 3 and above. For integrating PostHog
+                using Provide/inject, Vue.prototype, or versions 2.7 and below, see our{' '}
+                <Link to="https://posthog.com/docs/libraries/vue-js">Vue docs</Link>
+            </p>
+            <h3>Install posthog-js using your package manager</h3>
+            <JSInstallSnippet />
+            <h3>Create a plugin</h3>
+            <p>
+                Create a new file <code>posthog.js</code> in your plugins directory:
+            </p>
+            <VueCreatePluginsFileSnippet />
+            Add the following code to <code>posthog.js</code>:
+            <VuePluginsCodeSnippet />
+            <h3>Activate your plugin</h3>
+            <VueActivatePluginSnippet />
+        </>
+    )
+}

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

@@ -12,6 +12,7 @@ import {
     ReactInstructions,
     RemixInstructions,
     SvelteInstructions,
+    VueInstructions,
     WebflowInstructions,
 } from '.'
 
@@ -27,5 +28,6 @@ export const SessionReplaySDKInstructions: SDKInstructionsMap = {
     [SDKKey.REACT]: ReactInstructions,
     [SDKKey.REMIX]: RemixInstructions,
     [SDKKey.SVELTE]: SvelteInstructions,
+    [SDKKey.VUE_JS]: VueInstructions,
     [SDKKey.WEBFLOW]: WebflowInstructions,
 }

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

@@ -9,4 +9,5 @@ export * from './nuxt'
 export * from './react'
 export * from './remix'
 export * from './svelte'
+export * from './vue'
 export * from './webflow'

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

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

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

@@ -12,6 +12,7 @@ import {
     ReactInstructions,
     RemixInstructions,
     SvelteInstructions,
+    VueInstructions,
     WebflowInstructions,
 } from '.'
 
@@ -27,5 +28,6 @@ export const SurveysSDKInstructions: SDKInstructionsMap = {
     [SDKKey.REACT]: ReactInstructions,
     [SDKKey.REMIX]: RemixInstructions,
     [SDKKey.SVELTE]: SvelteInstructions,
+    [SDKKey.VUE_JS]: VueInstructions,
     [SDKKey.WEBFLOW]: WebflowInstructions,
 }

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

@@ -9,4 +9,5 @@ export * from './nuxt'
 export * from './react'
 export * from './remix'
 export * from './svelte'
+export * from './vue'
 export * from './webflow'

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

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