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

Vue Composable to handle user's Exit Intent behavior

This is an old refactored package, that I just 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 options = {
  LSItemKey: 'local-storage-key',
  handleScrollBars: true
}

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

You can also use all available helpers like this:

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