Nuxt SDK

The Nuxt SDK registers server middleware and plugins so Nuxt pages can read Zitadel auth state.

Generated setup

The CLI edits the first matching nuxt.config.{ts,mts,js,mjs} and keeps the backend URL server-side while exposing only the project id publicly.

Install

pnpm add @zitadel/sdk-nuxt

npm install @zitadel/sdk-nuxt

yarn add @zitadel/sdk-nuxt

Setup

The CLI adds pages, plugins, module config, environment files, and the SDK package.

pages/login.vue

pages/register.vue

pages/profile.vue

plugins/zitadel-components.client.ts

plugins/auth.server.ts

nuxt.config.ts

Create server middleware and runtime config:

import { createNextgenMiddleware } from "@zitadel/sdk-nuxt/server";

const { nextgen } = useRuntimeConfig();

export default createNextgenMiddleware({
  url: nextgen.url,
  protectedRoutes: ["/profile"],
  loginPath: "/login",
});

export default defineNuxtConfig({
  runtimeConfig: {
    nextgen: {
      url: process.env.ZITADEL_URL ?? "http://localhost:4000",
    },
  },
});

Runtime model

Verify the session JWT and attach auth state to the request event.

Use a server plugin to make auth state available to pages.

Verify

Start the app with ZITADEL_URL and NUXT_PUBLIC_ZITADEL_PROJECT_ID.
Visit /login and register a user.
Confirm /profile shows signed-in state.
Log out and confirm protected pages redirect to /login.

Nuxt SDK

Install

Setup

Runtime model

Verify

See also

On this page