Modal Components

ModalDialog​

Use <ModalDialog> component to show any content inside a Modal Dialog:

<SecondaryButton @click="showDialog=true">Show Modal</SecondaryButton>
<ModalDialog v-if="showDialog" @done="showDialog=false">
  <h3 class="p-8 text-3xl">Hello @servicestack/vue!</h3>
</ModalDialog>

SlideOver​

Use <SlideOver> to show contents inside an animated slide over:

<SecondaryButton @click="showSlide=true" class="mt-4">Show Slide</SecondaryButton>
<SlideOver v-if="showSlide" title="The Title" @done="showSlide=false" content-class="relative flex-1">
  <template #subtitle>
    a <b>subtitle</b>
  </template>
  <Alert type="error">Authentication Required</Alert>
  <div class="md:p-4">
    <SecondaryButton>Sign In</SecondaryButton>
  </div>
</SlideOver>

As seen in this example we can use content-class to customize the inner body contents and the <template #subtitle> slot to include an optional rich HTML subtitle, with all other inner contents is displayed in the SlideOver's body.

SignIn​

The <SignIn> Component can be used to create an instant Sign Up form based on the registered Auth Providers that handles Signing In authenticated users into Vue Apps with the useAuth() APIs:

<SignIn v-if="!user" />
<h3 v-else class="text-2xl my-4">Hello, {‎{ user.displayName }‎}</h3>

<script setup>
import { useAuth } from "@servicestack/vue"
const { user } = useAuth()
</script>

SignIn Properties

defineProps<{
    provider?: string  // which Auth Provider to default to
    title?: string     //= Sign In - Heading
    tabs?: boolean     //= true - Show different Auth Provider tabs
    oauth?: boolean    //= true - Show OAuth Provider buttons
}>()

Events

Use @login to run custom logic after successful authentication:

defineEmits<{
    (e:'login', auth:AuthenticateResponse): void
}>()