vue3_exit_intent_modal_on_mouse_leave_viewport.ts

1<script setup lang="ts">
2import { ref } from 'vue'
3import { VueExitIntent } from 'vue-exit-intent'
4import 'vue-exit-intent/dist/style.css'
5
6const isShowing = ref(false)
7
8function handleExitIntent() {
9  isShowing.value = true
10}
11
12function closeModal() {
13  isShowing.value = false
14}
15</script>
16
17<template>
18  <VueExitIntent v-model:open="isShowing" @exit-intent="handleExitIntent">
19    <div class="modal-content">
20      <h2>Don't leave yet!</h2>
21      <p>We have a special offer for you.</p>
22      <button @click="closeModal">Close</button>
23    </div>
24  </VueExitIntent>
25</template>
26
27<style scoped>
28.modal-content {
29  background: white;
30  padding: 2rem;
31  border-radius: 8px;
32  text-align: center;
33}
34</style>