Holden  Zemlak

Holden Zemlak


Build a IP Tracking App With Vue 3, Tailwind CSS & Leaflet.js (Composition API)

in this video we build an ip tracking app using vue 3 & the composition api, tailwind css & leaflet.js. We cover all the basics of setting up an application using the Vue 3 Composition API such as: setting up the “setup option”, creating data values & functions, making data reactive & lifecycle hooks.

We don’t cover everything, but we touch upon enough to create a simple starting app. This video should give you the knowledge & confidence to start build apps using Vue 3 & the Composition API.

Starting Repo: https://github.com/johnkomarnicki/vue-tailwinds-ip-tracker/tree/starting-files
Completed Repo: https://github.com/johnkomarnicki/vue-tailwinds-ip-tracker/tree/completed-app

Helpful Reference’s:
Design/Concept: https://tinyurl.com/fe-ip-address-tracker
Tailwinds CSS Tutorial: https://youtu.be/00gyCtIQp8E
Geolocation API: https://geo.ipify.org/
Leaflet.js: https://leafletjs.com/examples/quick-start/
Mapbox API: https://www.mapbox.com/
Nodejs: https://nodejs.org/en/
Vue CLI: https://cli.vuejs.org/
Vue 3 Composition API docs: https://v3.vuejs.org/guide/composition-api-introduction.html

Patreon: https://www.patreon.com/johnkomarnicki
Website: https://johnkomarnicki.com/
Twitter: https://twitter.com/john_komarnicki
LinkedIn: https://www.linkedin.com/in/john-komarnicki/

0:00 Introduction
3:42 Project Setup
9:55 Update Page/Document Title
12:07 Search Input
23:04 IP Address Info Component
30:12 Leaflet Map Implementation
36:45 Get Geolocation Function

#vue #vue3 #leaflet #vue3compositionapi
Current Subscribers: 1,789

#javascript #vue3 #vue

Build a IP Tracking App With Vue 3, Tailwind CSS & Leaflet.js (Composition API)