Building a Privacy-First Feedback Widget · Nuxt Blog

Engineering·Jun 13, 2025·5 min read
A lightweight, privacy-focused widget to gather your feedback on Nuxt documentation, built with Drizzle, NuxtHub database and Motion Vue.
Documentation is at the heart of the Nuxt developer experience. To continuously improve it, we needed a simple and effective way to collect user feedback directly on each page. Here's how we designed and implemented our feedback widget, drawing inspiration from Plausible's privacy-first approach.
Currently, users can provide feedback on our documentation by creating GitHub issues or contacting us directly. While these channels are valuable and remain important, they require users to leave their current context and take several steps to share their thoughts.
We wanted something different:
Our solution consists of three main components:
The interface combines Vue 3's Composition API with Motion for Vue to create an engaging user experience. The widget uses layout animations for smooth state transitions and spring physics for natural feedback. The useFeedback composable handles all state management and automatically resets when users navigate between pages.
Here's the success state animation, for example:
You can find the source code of the feedback widget here.
The challenge was detecting duplicates (a user changing their mind) while preserving privacy. We took inspiration from Plausible's approach to counting unique visitors without cookies.
This method generates a unique daily identifier by combining:
First, we define the schema for the feedback table and add a unique constraint on the path and fingerprint columns.
Then, in the server, we use Drizzle with an UPSERT strategy:
This approach enables updates if the user changes their mind within the day, creation for new feedback, and automatic deduplication per page and user.
You can find the source code of the server side here.
We use Zod for runtime validation and type generation:
This approach ensures consistency across frontend, API, and database.
The widget is now live across all documentation pages. Our next step is building an admin interface within nuxt.com to analyze feedback patterns and identify pages that need improvement. This will help us continuously enhance the documentation quality based on real user feedback.
The complete source code is available on GitHub for inspiration and contributions!
Stay updated on new releases and features, guides, and community updates.
Copyright © 2016-2026 Nuxt - MIT License