DEV Community

Cover image for Use Vue Exit Intent | A Vue Composable to power your exit intent content
nickap
nickap

Posted on • Updated on

Use Vue Exit Intent | A Vue Composable to power your exit intent content

A composable to show your modal when a user is about to leave the page or another threshold reached.

This is an old package, that I just refactored and published on NPM.

Be sure to use the latest release.

It's a composable that allows you to easily implement an exit intent strategy in your Vue application.
See the GitHub repo, and feel free to contribute.

You can install the package via NPM:

npm i vue-exit-intent
Enter fullscreen mode Exit fullscreen mode

Then import the composable and use it in your app:

<sript setup lang="ts">
import { useVueExitIntent } from 'vue-exit-intent'

const { isShowing, close } = useVueExitIntent();
</script>
Enter fullscreen mode Exit fullscreen mode
<template>
  <yourModalPopUp v-if="isShowing" @close="close"></yourModalPopUp>
</template>
Enter fullscreen mode Exit fullscreen mode

You can use more helpers and options like this:

const options = {
  repeatAfterDays: 1,
  scrollPercentageToTrigger: 50,
  handleScrollBars: true,
  LSItemKey: 'exit-intent-local-storage-key',
  setupBeforeMount: true
};

const {
  isShowing,
  isAllowedToGetTriggered,
  isUnsubscribed,
  close,
  resetState,
  unsubscribe
} = useVueExitIntent(options);
Enter fullscreen mode Exit fullscreen mode

The package comes with a variety of options that allow you to customize the behavior of your exit intent popup. You can find the full list of options in the documentation.

I hope you find it useful.
Let me know if you have any questions or feedback!

Top comments (4)

Collapse
 
eckdev profile image
Eyüp Can Kayadarçin

nice text komsu! :)

Collapse
 
nickap profile image
nickap

Thank you! :D

Collapse
 
dovudhusanov profile image
Dovud Husanov

nice

Collapse
 
nickap profile image
nickap

I'm glad you liked it! <3