Build Weather App with Vue CLI | For Vue JS beginners
Create a weather app using vue and fetching data from a Weather API.
Get current weather from a restful weather api and set weather animation.
Video covers how to use Vue Cli, set up Vue reactive data, Functions in Vue, Conditional rendering and Two-way binding
Timestamps
0:00-1:25 What we are building
1:25-4:15 Install Vue Cli and Create Project
4:15-6:43 Boilerplate of Vue CLI
6:43-7:52 Install bootstrap CSS to Vue CLI project
7:52-9:01 Import boostrap into project
9:01-10:42 Import custom CSS into project's Single file
10:42-13:10 Vue reactive data
13:10-15:59 Render reactive data in html tags
15:59-17:34 Two way binding (V-model)
17:34-19:08 Creating functions in Vue (Methods)
19:08-21:11 Add submit eventlistener to forms (V-on:click) and prevent form default behaviour
21:11-25:01 Fetch Api, Async and await
25:01-30:52 Update weather app(reactive data) with data from API
30:52-36:02 Change CSS class based on time of day with V-bind
36:02-40:07 Weather CSS animation based on current weather
40:07-43:28 Conditional rendering using V-if
43:28-48:47 Check for current weather and time of day
48:47-51:32 Handle errors for when no city is found
51:32-51:54 Credits
Resources
Full Code: https://github.com/somteacodes/weathe...
OpenWeatherMap API: https://openweathermap.org
Remember to install VueDev tools, its a browser extension, so just google it
Watch video Build Weather App with Vue CLI | For Vue JS beginners online without registration, duration hours minute second in high quality. This video was added by user SomTea Codes 12 October 2020, don't forget to share it with your friends and acquaintances, it has been viewed on our site 13,225 once and liked it 254 people.