Vue SDK

The Vue SDK wraps the shared web components with Vue 3-friendly bindings.

SPA proxy requirement

The CLI sets up a Vite dev proxy. Production deployments need a same-origin proxy for /__nextgen/*. See SDK proxy.

Install

pnpm add @zitadel/sdk-vue

npm install @zitadel/sdk-vue

yarn add @zitadel/sdk-vue

Setup

The CLI writes the app entry, configures the Vite proxy, adds environment files, and installs the SDK.

src/App.vue

vite.config.ts

.env.local

.env.example

package.json

Configure Zitadel once, then render the components:

<script setup lang="ts">
import { ZitadelLogin, ZitadelLogout, configureZitadel } from "@zitadel/sdk-vue";

const project = configureZitadel({
  projectId: import.meta.env.VITE_ZITADEL_PROJECT_ID,
  proxyPath: "/__nextgen",
});
</script>

<template>
  <ZitadelLogin :project="project" purpose="login" postSignInUrl="/" />
  <ZitadelLogout :project="project" postSignOutUrl="/login" />
</template>

Runtime model

The Vue components call the same shared Zitadel web components as the other SPA SDKs.

The generated Vite proxy forwards /__nextgen/* to the backend during local development.

Production needs an equivalent proxy for same-origin auth API calls.

Verify

Run the Vite app with generated environment variables.
Complete registration/login through the widget.
Confirm logout redirects to the configured path.
Use shadow-DOM-aware locators for browser automation.

Vue SDK

Install

Setup

Runtime model

Verify

See also

On this page