Vue SDK

The ThunderID Vue SDK (@thunderid/vue) provides a comprehensive set of components, composables, and utilities to integrate ThunderID authentication and user management into your Vue 3 applications.

Installation

Install the ThunderID Vue SDK using your preferred package manager:

npm

npm install @thunderid/vue

Yarn

yarn add @thunderid/vue

pnpm

pnpm add @thunderid/vue

Bun

bun add @thunderid/vue

Getting Started

To get started quickly, check out our Vue Quickstart Guide for step-by-step instructions.

Use the redirect-based sign-in flow

Browser SPAs should sign in using the redirect-based OAuth2 authorization_code + PKCE flow. Use the <SignInButton /> component.

Initiating a sign-in flow directly in the browser — the embedded <SignIn /> component or useThunderID().signIn({ applicationId }) used standalone — is not supported for browser SPAs. See Register an application.

Features

Providers

The SDK provides a root provider component that manages authentication state across your application via Vue's provide/inject.

• <ThunderIDProvider /> - Root provider component that wraps your application and manages authentication state

Components

Pre-built, customizable components for common authentication flows and user management.

Action Components

• <SignInButton /> - Trigger sign-in flow
• <SignOutButton /> - Sign out the current user
• <SignUpButton /> - Trigger sign-up flow

Control Components

• <SignedIn /> - Conditionally render content for authenticated users
• <SignedOut /> - Conditionally render content for unauthenticated users
• <Loading /> - Display loading state during authentication

User Self-care Components

• <UserDropdown /> - User menu with profile and settings
• <UserProfile /> - Complete user profile management interface
• <User /> - Display user information

Composables

Vue composables for programmatic access to authentication and user data.

• useThunderID() - Access the main ThunderID SDK instance

Customization

All components in the ThunderID Vue SDK are fully customizable. You can:

• Override default styles using CSS classes or inline styles
• Customize component behavior through props
• Build custom components using the provided composables
• Use scoped slots to control rendering