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
Suggest:
☞ Vue js Tutorial Zero to Hero || Brief Overview about Vue.js || Learn VueJS 2023 || JS Framework
☞ Is Vue.js 3.0 Breaking Vue? Vue 3.0 Preview!
☞ Learn Vue.js from scratch 2018
☞ Vue.js Tutorial: Zero to Sixty