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

nickap

nickap

Posted on April 19, 2023

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!

💖 💪 🙅 🚩
nickap
nickap

Posted on April 19, 2023

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related