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
Yarn
pnpm
Bun
npm install @thunderid/vue
yarn add @thunderid/vue
pnpm add @thunderid/vue
bun add @thunderid/vue
Getting Started
To get started quickly, check out our Vue Quickstart Guide for step-by-step instructions.
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
Organization Components (B2B)
<CreateOrganization />- Create new organizations<OrganizationProfile />- Manage organization settings<OrganizationSwitcher />- Switch between organizations<OrganizationList />- List user's organizations<Organization />- Display organization 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
