Use Cases
Modal Bottom
Create a <ModalBottom> component with <VueFinalModal> and TailwindCSS.
A modal that slides in from the bottom. Swipe it down, or use the close button, which calls the close function of the default slot of <VueFinalModal>.
Preview
Preview.vue
<script setup lang="ts">
import { useModal } from 'vue-final-modal'
import ModalBottom from './ModalBottom.vue'
const { open } = useModal({
component: ModalBottom,
attrs: {
title: 'Hello World!',
},
slots: {
default: '<p>The content of the modal</p>',
},
})
</script>
<template>
<VButton @click="() => open()">
Open Modal
</VButton>
</template>
<ModalBottom> component
<script setup lang="ts">
import { useId } from 'vue'
import { VueFinalModal } from 'vue-final-modal'
defineProps<{
title?: string
}>()
const titleId = useId()
</script>
<template>
<VueFinalModal
v-slot="{ close }"
content-class="absolute bottom-0 w-full p-4 bg-white dark:bg-gray-900 space-y-2"
swipe-to-close="down"
content-transition="vfm-slide-down"
overlay-transition="vfm-fade"
:aria-labelledby="titleId"
>
<div class="flex items-center justify-between gap-2">
<h1 :id="titleId" class="text-xl">
{{ title }}
</h1>
<button type="button" class="px-2 border rounded-lg" aria-label="Close" @click="close()">
×
</button>
</div>
<div class="text-3xl">
Swipe down to close the modal
</div>
<slot />
</VueFinalModal>
</template>