Vue SDK
Vue wrappers for Zitadel login and logout UI.
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-vueSetup
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
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.
See also
- SDK proxy — why SPAs need a same-origin
/__nextgen/*proxy and how to run one in production. - Components — the shared web components these wrappers render.
@zitadel/sdk-vuesource and the CLI Vue patcher.