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

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 Vue.
Enter a name (e.g. My Vue App).
Click Create.
Select how you want to sign in users (e.g., email/password, social login, etc.).
Select Theme settings and other options.
In the Configuration step, click on the banner to add Vite's development server URL to the list of Authorized Redirect URIs & CORS Allowed Origins. The default is http://localhost:5173 (adjust the port if your dev server uses a different one).

Note

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

Create a Vue App

Create your new Vue 3 app using Vite:

npm
Yarn
pnpm

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

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

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

Install @thunderid/vue

Install the ThunderID Vue SDK in your project:

npm
Yarn
pnpm
Bun

npm install @thunderid/vue

yarn add @thunderid/vue

pnpm add @thunderid/vue

bun add @thunderid/vue

Register the Plugin

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')

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>

Run Your App

Start the development server:

npm
Yarn
pnpm

npm run dev

yarn dev

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 FlowAdd MFA, passkeys, or social login to your flow: no app code changes required.Flow Designer →

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