1
IP Address Tracker : My first project built with Nuxt 3, Leaflet, and Vitest
Happy to share one of my recent front-end projects: an IP Address Tracker built with Nuxt 3.
What it does:
The app allows users to input any public IP address or domain to retrieve real-time location details (country, city, timezone, ISP) and visually pinpoint the location on an interactive map.
Tech stack & tools:
• Framework: Nuxt 3 (SSR & Vue 3 composition API)
• Data source: IPify Geolocation API
• Mapping: LeafletJS / Vue2-Leaflet integration
• Testing: Vitest + Vue Test Utils
Testing strategy with Vitest:
To ensure a smooth user experience, I used Vitest to test key interface behaviors:
1. Input validation & form submission handling.
2. Reactive event propagation from child components to trigger API calls.
3. Edge case handling (e.g., preventing external API calls for private IP ranges like 10.0.0.0/8, 172.16.0.0/12, and 192.168.0.0/16).
Live Demo & Link:
👉 Live App: https://ip-addres.netlify.app/
Question for the community :
How do you usually handle Leaflet / client-side map rendering issues when working with SSR frameworks like Nuxt 3 without causing hydration mismatches? Would love to hear your approaches!
Add a comment
0/2000