Vue 3 Integration

<meta name="userplane:workspace" content="YOUR_WORKSPACE_ID" />
<script type="module" src="https://cdn.userplane.io/embed/script.js"></script>

// src/plugins/userplane.ts
import type { App } from 'vue';
import { initialize } from '@userplane/sdk';

interface UserplanePluginOptions {
  workspaceId: string;
}

export const userplanePlugin = {
  install(_app: App, options: UserplanePluginOptions) {
    initialize({ workspaceId: options.workspaceId });
  },
};

// src/main.ts
import { createApp } from 'vue';
import App from './App.vue';
import { userplanePlugin } from './plugins/userplane';

const app = createApp(App);

app.use(userplanePlugin, {
  workspaceId: import.meta.env.VITE_USERPLANE_WORKSPACE_ID,
});

app.mount('#app');

// router/index.ts — example navigation guard
router.beforeEach((to, _from, next) => {
  if (requiresAuth(to) && !isAuthenticated()) {
    const loginQuery: Record<string, string> = { redirect: to.fullPath };

    // Carry userplane params through
    for (const [key, value] of Object.entries(to.query)) {
      if (key.startsWith('userplane-') && typeof value === 'string') {
        loginQuery[key] = value;
      }
    }

    next({ path: '/login', query: loginQuery });
  } else {
    next();
  }
});

// src/plugins/userplane.ts
import type { App } from 'vue';
import { initialize, set } from '@userplane/sdk';

export const userplanePlugin = {
  install(_app: App, options: { workspaceId: string }) {
    initialize({ workspaceId: options.workspaceId });
    set('environment', 'production');
  },
};

cd examples/vue && npm install && npm run dev