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

#vue #webdev #javascript #typescript

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

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>

<template>
  <yourModalPopUp v-if="isShowing" @close="close"></yourModalPopUp>
</template>

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);

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!