Vue Quickstart

Use this guide to add ThunderID authentication to a Vue 3 application using the @thunderid/vue SDK.

What You Will Learn

• Create a new Vue 3 app using Vite

• Install the @thunderid/vue package

• Add working sign-in and sign-out

• Display the signed-in user's profile

Prerequisites

• About 15 minutes

• Node.js installed on your system

• npm, yarn, or pnpm

• Your preferred code editor

1

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.

2

Create an Application

1. 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).

2. Navigate to Applications, and click Add Application.

3. Under Technology, select Vue.

4. Enter a name (e.g. My Vue App) and create an application. The rest of the settings can stay at their defaults.

5. Copy the Client ID from the General tab. You'll need it when configuring the SDK.

6. Under General, add http://localhost:5173 to the list of Authorized Redirect URIs.

7. The Vue SDK calls the ThunderID API directly from the browser, so you need to allow your app's origin:

   1. In the left navigation, navigate to Settings.
   2. Under the System section, open the CORS tab.
   3. Enter http://localhost:5173 (or the relevant URL for your setup).
   4. Click Add Origin.

3

Create a Vue App

Create your new Vue 3 app using Vite:

npm

npm create vite@latest my-vue-app -- --template vue
cd my-vue-app
npm install

Yarn

yarn create vite my-vue-app --template vue
cd my-vue-app
yarn install

pnpm

pnpm create vite my-vue-app --template vue
cd my-vue-app
pnpm install

4

Install @thunderid/vue

Install the ThunderID Vue SDK in your project:

npm

npm install @thunderid/vue

Yarn

yarn add @thunderid/vue

pnpm

pnpm add @thunderid/vue

Bun

bun add @thunderid/vue

5

Register the Plugin

Register ThunderIDPlugin in src/main.js:

src/main.js

import { createApp } from 'vue'
import { ThunderIDPlugin } from '@thunderid/vue'
import './style.css'
import App from './App.vue'

const app = createApp(App)
app.use(ThunderIDPlugin)
app.mount('#app')

6

Build with ThunderID Components

Update src/App.vue with ThunderID authentication components:

Configuration

Replace <your-client-id> with the Client ID you obtained when creating the application in ThunderID.

src/App.vue

<script setup>
import {
  SignedIn,
  SignedOut,
  SignInButton,
  SignOutButton,
  UserDropdown,
} from '@thunderid/vue'
</script>

<template>
  <ThunderIDProvider
    client-id="<your-client-id>"
    base-url="https://localhost:8090"
  >
    <section id="center">
      <SignedIn>
        <UserDropdown />
      </SignedIn>
      <SignedOut>
        <SignInButton>Sign In</SignInButton>
      </SignedOut>
    </section>
  </ThunderIDProvider>
</template>

7

Run Your App

Start the development server:

npm

npm run dev

Yarn

yarn dev

pnpm

pnpm run 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:5173

You should see the <SignInButton />. Click it to be redirected to the ThunderID-hosted sign-in page. Login with your test user, then return to your app with the user dropdown displayed.

What's Next

Upgrade the Sign-In Flow

Add MFA, passkeys, or social login to your flow: no app code changes required.

Flow Designer →

Vue SDK Reference

Explore the full API reference for the ThunderID Vue SDK.

API Reference →