An authentication modal with social login buttons and email form.
$ npx shadcn-vue@latest add "https://nxui.geoql.in/r/auth-modal.json"Keep in mind
This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.
<script setup lang="ts">
import AuthModal from '~/components/ui/auth-modal/AuthModal.vue';
const open = ref(false);
</script>
<template>
<button @click="open = true">Open Auth Modal</button>
<AuthModal v-model:open="open" />
</template>
| Prop | Type | Default | Description |
|---|---|---|---|
trigger-text | string | 'Sign up / Sign in' | Text on the trigger button |
class | string | '' | Additional CSS classes for the trigger button |
| Event | Payload | Description |
|---|---|---|
login | string | Emitted when a social provider or email is selected. Payload is the provider name (e.g. 'Google', 'email'). |