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, duration hours minute second in high quality that is uploaded to the channel SomTea Codes 12 October 2020. Share the link to the video on social media so that your subscribers and friends will also watch this video. This video clip has been viewed 13,225 times and liked it 254 visitors.
