Building a Polite Popup with Nuxt 3
summary
Built a Nuxt 3 composable that shows a non‑intrusive newsletter popup only after 6 seconds of active time and when the reader scrolls past 35% of the page, calculates scroll percentage from document height and window height using VueUse composables (useTimeout, useWindowSize, useWindowScroll), persists {status, seenCount, lastSeen} to localStorage via useLocalStorage, and triggers once‑per‑day; demo shows about 20% of exposed visitors clicking “yes, I’m interested.”
AI-written summary · about
chapters (16)
- 0:00Polite popups introduction
- 1:26Impolite popup problems
- 2:28What makes a popup polite
- 3:31Demo: polite popup in Nuxt 3
- 3:53Tracking page time
- 5:18Tracking scroll progress
- 7:08Conditional popup display
- 7:50Preventing popup overuse
- 8:58Nuxt 3 route integration
- 9:39Closing remarks
- 10:00Q&A
- 10:43Q&A: Popup effectiveness
- 11:45Q&A: Build vs libraries
- 12:27Q&A: Nuxt 3 limits
- 12:50Q&A: User-friendly popups
- 13:32Q&A: Custom solution choice
related talks
48mThe New Frontend Toolkit: Popover API, Dialog, and Next-Gen CSS
24mIndependent Popups with Element Reparenting & The HTML Popover API
32mHow popovers are about to become a whole lot easier to build
01h 01mNuxt 3 Under a Lense
25mHow we are optimizing Nuxt without removing features in VueStorefront
28mBuilding Interactive Experiences with Nuxt Content
32mUnderstand the hard parts of Nuxt
38mThe Vue from up Here Scaling with a Progressive JS Framework