Vue.js SDK for Asgardeo

The Asgardeo Vue SDK provides a streamlined way to integrate secure authentication and user management into your Vue.js applications. Built for Vue 3, it offers a comprehensive set of composables, components, and utilities to handle authentication flows, user profiles, and multi-tenancy features.

• Easy Integration: Simple setup with the AsgardeoPlugin and provider components
• Composable API: Vue 3 composables for reactive authentication state management
• Pre-built Components: Ready-to-use components for sign-in, sign-up, user profiles, and more
• Multi-Tenancy Support: Built-in organization/workspace management capabilities
• Customizable UI: Primitive components and styling options for seamless integration
• International Support: Multi-language support with easy localization
• Type-Safe: Full TypeScript support for better developer experience

Get started with Asgardeo in your Vue application in minutes. Follow our Vue Quick Start Guide for step-by-step instructions on integrating authentication into your app.

# Using npm
npm install @asgardeo/vue

# Using pnpm
pnpm add @asgardeo/vue

# Using yarn
yarn add @asgardeo/vue

<script setup lang="ts">
import { useUser } from '@asgardeo/vue'

const { user, isLoading } = useUser()
</script>

<template>
  <div>
    <p v-if="isLoading">Loading...</p>
    <p v-else-if="user">Welcome, {{ user.username }}</p>
    <p v-else>Not signed in</p>
  </div>
</template>

For complete API documentation including all components, composables, and customization options, see the Vue SDK Documentation.

• useAsgardeo() - Main SDK client access
• useUser() - User profile and authentication state
• useOrganization() - Organization/workspace management
• useI18n() - Internationalization
• useTheme() - Theme customization
• useBranding() - Branding customization
• useFlow() - Authentication flow control
• useFlowMeta() - Flow metadata access

• SignedIn - Renders children only when user is authenticated
• SignedOut - Renders children only when user is not authenticated
• Loading - Renders children while authentication state is loading
• UserComponent - Access user information with scoped slot pattern
• OrganizationComponent - Access organization context with scoped slot pattern

• SignInButton / BaseSignInButton - Sign-in button (styled and unstyled)
• SignOutButton / BaseSignOutButton - Sign-out button (styled and unstyled)
• SignUpButton / BaseSignUpButton - Sign-up button (styled and unstyled)

• SignIn / BaseSignIn - Embedded sign-in form
• SignUp / BaseSignUp - Embedded sign-up form
• UserProfileComponent / BaseUserProfile - User profile display
• UserDropdown / BaseUserDropdown - User menu dropdown
• OrganizationList / BaseOrganizationList - Organization listing
• OrganizationSwitcher / BaseOrganizationSwitcher - Organization switcher
• OrganizationProfile / BaseOrganizationProfile - Organization profile
• CreateOrganization / BaseCreateOrganization - Organization creation form
• AcceptInvite / BaseAcceptInvite - Invitation acceptance
• InviteUser / BaseInviteUser - User invitation form
• LanguageSwitcher / BaseLanguageSwitcher - Language selection

• Callback - Handle OAuth callback redirect

• GoogleButton - Sign in with Google
• FacebookButton - Sign in with Facebook
• GitHubButton - Sign in with GitHub
• MicrosoftButton - Sign in with Microsoft

• Button, Card, Alert, TextField, PasswordField, Select, Checkbox, DatePicker, OtpField, Typography, Divider, Logo, Spinner

• createAsgardeoGuard - Vue Router navigation guard for protected routes
• createCallbackRoute - Generate a callback route record for Vue Router
• handleWebAuthnAuthentication - WebAuthn/passkey support
• hasAuthParamsInUrl - Detect OAuth parameters in URL
• navigate - Programmatic navigation helper
• http - HTTP client with token management

Check out our example applications to see the Vue SDK in action:

• Vue SDK Playground - Example application

• Getting Started
• Vue SDK Guide
• Configuration Options
• Composables & Components

For support and questions:

• Asgardeo Documentation
• GitHub Issues
• WSO2 Community Forum

We welcome contributions! Please see our Contributing Guidelines for more details.

Licenses this source under the Apache License, Version 2.0 LICENSE, You may not use this file except in compliance with the License.