Nuxt Quickstart

Use this guide to add ThunderID authentication to a Nuxt 3 application using the @thunderid/nuxt module.

What You Will Learn

Create a new Nuxt 3 app

Add working sign-in and sign-out

Wrap your app with ThunderIDRoot

Prerequisites

About 15 minutes

Node.js 18.0 or later installed on your system

npm, yarn, or pnpm

Your preferred code editor

Run ThunderID

Start a local ThunderID instance. Pick the method that works best for you:

$npx thunderid

Requires Node.js 18+

Full install guide →

Once it's running, the console is available at https://localhost:8090/console.

Create an Application

Sign in to the Console.

Test User
If you used the default setup, sign in to the Console as admin with the password generated during setup and printed to the setup output (unless you supplied your own).
Navigate to Applications.
Click Add Application.
From the Choose a type page, select Nuxt.
Enter a name (e.g. My Nuxt App).
Select how you want to sign in users (e.g., email/password, social login, etc.).
Select Theme settings.
Set Sign-In Approach to Bring Your Own UI.
Click Create.

Note

Copy the Application ID from the General tab, under Quick Copy. Also copy the Client Secret from the window that pops up when the application is created; if lost, you can regenerate it from the application's Credentials tab.

Create a Nuxt App

Create a new Nuxt 3 app:

npm
pnpm
Yarn

npm create nuxt@latest my-nuxt-app
cd my-nuxt-app

pnpm create nuxt@latest my-nuxt-app
cd my-nuxt-app

yarn create nuxt my-nuxt-app
cd my-nuxt-app

Install @thunderid/nuxt

Install the ThunderID Nuxt module:

npm
pnpm
Yarn
Bun

npm install @thunderid/nuxt

pnpm add @thunderid/nuxt

yarn add @thunderid/nuxt

bun add @thunderid/nuxt

Register the Module

Add @thunderid/nuxt to your nuxt.config.ts:

nuxt.config.ts
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: '2025-07-15',
  devtools: { enabled: true },
  modules: ['@thunderid/nuxt'],
})

That's all the nuxt.config.ts change needed. The module reads all configuration from environment variables.

Set Environment Variables

Create a .env file in your project root with the following:

Configuration

Replace <your-application-id> and <your-client-secret> with the values from your ThunderID application.

Generate a random string for THUNDERID_SESSION_SECRET (at least 32 characters):

openssl rand -base64 32

.env
NUXT_PUBLIC_THUNDERID_BASE_URL=https://localhost:8090
NUXT_PUBLIC_THUNDERID_APPLICATION_ID=<your-application-id>
NUXT_PUBLIC_THUNDERID_SIGN_IN_URL=/signin
NUXT_PUBLIC_THUNDERID_SIGN_UP_URL=/signup
THUNDERID_CLIENT_SECRET=<your-client-secret>
THUNDERID_SESSION_SECRET=<a-random-secret-for-session-signing>
# DANGER: Disables ALL TLS verification. Only for local development with self-signed certs. NEVER use in production.
NODE_TLS_REJECT_UNAUTHORIZED=0

Wrap Your App with ThunderIDRoot

The <ThunderIDRoot> component mounts the full authentication provider tree. Wrap your application content with it in app.vue:

app.vue
<template>
  <ThunderIDRoot>
    <NuxtPage />
  </ThunderIDRoot>
</template>

Auto-imports

The @thunderid/nuxt module auto-registers all components (under the ThunderID prefix, e.g. <ThunderIDSignedIn>) and auto-imports all composables. You do not need to import them manually.

The <ThunderIDSignIn /> and <ThunderIDSignUp /> components render the sign-in and sign-up forms natively, using the Flow Execution API. Create the routes configured above as NUXT_PUBLIC_THUNDERID_SIGN_IN_URL and NUXT_PUBLIC_THUNDERID_SIGN_UP_URL:

app/pages/signin.vue
<template>
  <main>
    <ThunderIDSignIn />
  </main>
</template>

app/pages/signup.vue
<template>
  <main>
    <ThunderIDSignUp after-sign-up-url="/" />
  </main>
</template>

Build with ThunderID Components

Update your home page with ThunderID authentication components:

app/pages/index.vue
<template>
  <main>
    <ThunderIDSignedIn>
      <ThunderIDUserDropdown />
    </ThunderIDSignedIn>
    <ThunderIDSignedOut>
      <ThunderIDSignInButton>Sign In</ThunderIDSignInButton>
    </ThunderIDSignedOut>
  </main>
</template>

info

<ThunderIDSignInButton /> navigates to the local NUXT_PUBLIC_THUNDERID_SIGN_IN_URL route you created above, rather than redirecting to a ThunderID-hosted page.

Run Your App

Start the development server:

npm
pnpm
Yarn

npm run dev

pnpm run dev

yarn dev

Test credentials

You'll need a user to sign in with. If you haven't created one yet, open https://localhost:8090/console, navigate to Users, and add a test user with an email and password.

Success

Visit your app at 🌐 http://localhost:3000

You should see the <ThunderIDSignInButton /> button. Click it, you'll land on your application's own /signin page. Login with your test user, then return to your application with the user dropdown displayed.

What's Next

Upgrade the Sign-In FlowAdd MFA, passkeys, or social login to your flow: no app code changes required.Flow Designer →

Nuxt SDK ReferenceExplore the full API reference for the Nuxt SDK.API Reference →