1- # vue-exit-intent
1+ # Exit Intent Pop-up for VUE 3
2+ Vue 3 pop-up that shows up when a user is leaving, or another threshold reached.
3+ ## A flexible Pop-up not only for marketing purposes.
24
3- This template should help get you started developing with Vue 3 in Vite.
5+ # Usage
6+ You can use this package as a ** global component** .
7+ ### Add the package
8+ ```
9+ npm i vue-exit-intent
10+ ```
11+ ### Your main.js should iclude:
12+ ```
13+ import vueExitIntent from "vue-exit-intent";
14+ import 'vue-exit-intent/dist/style.css';
415
5- ## Recommended IDE Setup
616
7- [ VSCode ] ( https://code.visualstudio.com/ ) + [ Volar ] ( https://marketplace.visualstudio.com/items?itemName=Vue.volar ) (and disable Vetur) + [ TypeScript Vue Plugin (Volar) ] ( https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin ) .
17+ const app = createApp(App);
818
9- ## Customize configuration
19+ app.use(vueExitIntent);
20+ ```
21+ > See example main.js below:
22+ ```
23+ import { createApp } from "vue";
24+ import App from "./App.vue";
25+ import "./assets/main.css";
1026
11- See [ Vite Configuration Reference] ( https://vitejs.dev/config/ ) .
27+
28+ import vueExitIntent from "vue-exit-intent";
29+ import 'vue-exit-intent/dist/style.css';
30+
31+
32+ const app = createApp(App);
33+
34+ app.use(vueExitIntent);
35+
36+ app.mount("#app");
37+ ```
38+
39+ ### Finally use the component like this
40+ ```
41+ <vue-exit-intent>Your Content Here</vue-exit-intent>
42+ ```
43+ Your content will get displayed via [ Slots] ( https://vuejs.org/guide/components/slots.html ) .
44+ ### Pass available props like this
45+ ```
46+ <vue-exit-intent
47+ :repeatAfterHours="360"
48+ :navigateBeforeShowSeconds="0"
49+ :color="'#555'"
50+ :bdropColor="'rgba(0, 0, 0, 0.7)'"
51+ >
52+ </vue-exit-intent>
53+ ```
54+ ### Available props
55+ | Prop | Default Value | Type | Required |
56+ | --- | --- | --- | --- |
57+ | ** repeatAfterHours** | 24* 7 * (7 days)* | Number | false |
58+ | ** scrollPercentage** | 0 | Number | false |
59+ | ** navigateBeforeShowSeconds** | 0 | Number | false |
60+ | ** mouseOutEnabled** | true | Boolean | false |
61+ | ** showByDefault** | false | Boolean | false |
62+ | ** showCloseBtn** | true | Boolean | false |
63+ | ** color** | '#555 ' | String | false |
64+ | ** bgroundColor** | '#fefefe' | String | false |
65+ | ** bdropColor** | 'rgba(0, 0, 0, 0.7)' | String | false |
66+
67+ ### Props Description
68+ - ** repeatAfterHours**
69+ After how many hours you want the popup to get triggered again.
70+ "0" to disable. Giving a "0", the popup will be shown only once! Until the localstrage of the user gets cleared.
71+ When a user gets the popup that exact timestamp is stored in localstorage and its taken into account next time the user will visit your page.
72+ This one runs a CHECK before show.
73+
74+ - ** scrollPercentage**
75+ "0" to disable.
76+ The percentage that the user has to scroll before the pop-up gets triggered.
77+ This one TRIGGERS the popup.
78+
79+ - ** navigateBeforeShowSeconds**
80+ "0" to disable. How many seconds the user has to navigate before the pop-up gets triggered.
81+ This one TRIGGERS the popup.
82+
83+ - ** mouseOutEnabled**
84+ If false. Mouse out event will not trigger the pop-up. The user would have to reach navigateBeforeShowSeconds or scrollPercentage to get the popup.
85+ Ir true, well.. you know.
86+ This one TRIGGERS the popup.
87+
88+ - ** showByDefault**
89+ Show On Mount. When a user visit your page.
90+
91+ - ** showCloseBtn**
92+ Show a closing button "X" (top-right).
93+ * You might want to be a lil bit more aggresive begging for attention.*
94+
95+ - ** color**
96+ "X" Button color.
97+
98+ - ** bgroundColor**
99+ Background Color.
100+
101+ - ** bdropColor**
102+ BackDrop Color.
103+
104+ ### Use it with defaults
105+ Please add your content in between the opening and closing tag.
106+ If you don't add your pop-up content, a fallback content will be shown.
107+ ```
108+ <vue-exit-intent></vue-exit-intent>
109+ ```
110+
111+ # Contribute
112+ Attach event listeners only if we are sure will show the popup (check localstorage on mount)?
113+ I just realized I a mot removing listeners on unmount.
114+ Maybe typescript? tests?
12115
13116## Project Setup
14117
@@ -33,3 +136,22 @@ npm run build
33136``` sh
34137npm run lint
35138```
139+ ## Recommended IDE Setup
140+
141+ [ VSCode] ( https://code.visualstudio.com/ ) + [ Volar] ( https://marketplace.visualstudio.com/items?itemName=Vue.volar ) (and disable Vetur) + [ TypeScript Vue Plugin (Volar)] ( https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin ) .
142+
143+ ## Customize configuration
144+
145+ See [ Vite Configuration Reference] ( https://vitejs.dev/config/ ) .
146+ ## License
147+ ```
148+ The MIT License (MIT)
149+
150+ Copyright © 2022 nickap
151+
152+ Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
153+
154+ The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
155+
156+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
157+ ```
0 commit comments