Build a Weather App in VueJS | Vue Beginner Tutorial

Learn how to make a Weather app in Vue JS, we use the Open Weather Map API to make calls to a restful api to return the current weather data. This uses the Modern Javascript Fetch API along with Vue JS Methods and conditionals.
A Javascript Project
Day 12 #31Days31Videos
// JOIN THE DISCORD
/ discord
// MY GEAR FOR CODING AND RUclips
Blue Yeti Microphone: amzn.to/3jr3l7T
Microphone Stand: amzn.to/35B9LMN
Chair: amzn.to/3dWds3F
Thunderbolt Dock: amzn.to/3osBF6u
Monitor: amzn.to/37I8KoR
All of these products I own and have tested!
Source Code: github.com/TylerPottsDev/weat...
FOLLOW ME ON TWITTER!!!
/ tyler_potts_
LIKE, SUBSCRIBE & SHARE
Music
DEAF KEV - Invincible (NCS Release)
Neffex - Grateful (NCS Release)

[@edita_gaming]

Wonderful tutorial! Please keep it up, the world needs more of this ❤

[@TylerPotts]

Thank you! :D

[@aesap_]

This was my first vue tutorial and this guy explained everything great

[@alloo12dal]

Great Tutorial! This really helps understand the inner workings of vue with the fetch API

[@jjkelsey1180]

Thank you so much, Tyler. This is a really great tutorial :D

[@wagnerfix]

Thank you so much, great example. This help me for to learn vue more.

[@michelefernandez5893]

This was my first time playing with Vue. It was fun to have something up and running in less than an hour. Thank you for that!

[@taylorfreeman7782]

Great stuff! Thanks Tyler.

[@benzemafan67]

Really awesome and satisfying to code, thank you !

[@dudzpedra]

just completed my second project of the day thanks to you! such a great feeling of accomplishment!

[@raphaelaglogg9053]

Hi there! I have an assignment in school where I need to submit a Vue application. It sounds like you have mastered this task. It's a bit embarrassing for me to ask, but would it be possible for me to have a zip folder of your work?

[@00el04]

Just found out your channel, subbed! I hope you can do more of these Vue.js videos in the future Tyler!

[@timetolive4869]

Man this is just awesome :) you got a new sub to the channel! and honestly I was blown away from the quick styling of the web app!

[@TylerPotts]

Awesome, thank you!

[@Gthefray]

Thank you! This was really fun to make. I've only just discovered vueJS this week and was eager to find another project to try out. I'll try to include a search icon into the search bar and tinker with the weather box. And whatever else comes to mind.

[@sampower7887]

Cheers for the refresher :D

[@benjaminko7812]

Thanks for sharing! Please keep doing this tutorial

[@vladharanich]

thank you, it's really good idea for an app. Already subscribed and pushed the like button :)

[@TylerPotts]

Hero!

[@hackathon-bestmostar273]

Nice, you really helped me to understand vue.js more clear.

[@handsomecat7225]

Great tutorial. Thanks Tyler.

[@vuejsdev]

I really appreciate your work, thank you.

[@mariocalcetin7602]

Thank you very much Tyler, it's amazing how fast you build. greetings from Chile .

[@TylerPotts]

Thank you very much!

[@canerdemircigm]

for starting to the vue this is great tutorial. Thanks.

[@anurag3487]

you're very fast and quick in CSS, subbed :)

[@akashaj4660]

Thank you! Awesome Tuts

[@RodneyKimbangu]

Legendary, my friend! I was looking for reasons not to use Vue js, but you gave me reasons to. Thank you!

[@MissBoom135]

Really enjoyed this tutorial, thank you 😄

[@scientist.entity6609]

Thank you so much for doing this lesson also with vuejs

[@TylerPotts]

You're welcome!

[@cubedev4838]

Amazing, i found your channel today!!!

[@khaireddinebouras4523]

Awesome Video !! Thanks

[@AustroPower]

Hello Tyler, i want to thank you for these great tutorials! :) Keep up the good job with Vue.js/JS! Got a sub from me :)

[@faizboy101]

thank you Tyler. very informative.

[@ShadowDragon946]

I'm doing this in my website development class and oh my lord I did not understand how to use Vue very well but I really want to say thank you because you made that so much easier then what I was thinking it was going to be. I actually have some understanding of it now and used a lot of what you did in my project and it works and looks so much better. Thank you so much!!

[@ahmedouyahya]

Thanks a lot. You just earned another subscriber

[@charljones7266]

Really helped understand Vue, thanks

[@caiojns]

Brilliant tutorial mate. Really good indeed!

[@TylerPotts]

Thank you! Cheers!

[@CharithJayasanka]

Great and simple tutorial (y) Keep it up

[@mohamedannajar3140]

Bro I love your tutorials thank you ^^

[@TylerPotts]

No, Thank you! :)

[@yafigamtina]

This guy's tutorials are so clear

[@gboladepopoola4464]

Thank you! Helped my understanding of Vue. I would also appreciate if you make a video where props are passed between components in Vue

[@petipois28]

Used this as a base for my 4th app in my quest to create 30 ionic vue apps in 30 days. I added moment js for the date and used unsplash for my images. Nice Tutorial. Thank you for your good work.

[@k303k]

Thanks a lot! Becuase of you i've done created this beautiful weather app.

[@al_peterson]

thanks for the tutorial! great stuff!

[@TylerPotts]

Glad it was helpful!

[@zaqueuorlando801]

This was a great one and supper easy to follow

[@TylerPotts]

Thank you!

[@barnabyhillis974]

Great video, easy to follow style, if people don’t want to see the CSS they can skip through!

[@TylerPotts]

Glad you liked it!

[@ram-bk4mu]

mad skills man!

[@swapnilbhojane6922]

Really nice app you made...

[@ICSVortex-DCS]

Great video!

[@TylerPotts]

Thanks!

[@Hijra.ma_]

Thank you so much

[@danielpietschmann5294]

awesome tutorial! :)

[@Latif127]

Awesome tutorial

[@romanshvietsov8026]

Thank you bro, so useful video!

[@TylerPotts]

Glad it was helpful!

[@nicolasbava3467]

Thank you very much!! very clear and very interesting. have a nice day!! :))

[@TylerPotts]

Thank you! You too!

[@MM-um1sq]

that was awesome, thanks.

[@TylerPotts]

Glad you liked it!

[@hosseinghahremani1182]

Thanks Thanks Thanks
for the awesome tutorial.

[@natarajana.v4262]

Thankyou So much for this sir.

[@michaeldrexler9822]

This was one of the best Programming-Tutorials ever. I wish more would be like that one!
For that great Video i left a subscription to your channel :)

[@fabianlaumer838]

same opinion

[@elitedesignhub415]

This tutorial is wonderful 💯🔥🔥🔥❤️

[@TylerPotts]

Thank you 🙌

[@a_rod1678]

Where do you get the url_base of openweather?

[@GrungeLyrics]

great video!

[@joylearn2868]

Amazing typing skill and sweet language ❤

[@dfordemo981]

its beautiful

[@anlkavuk9437]

Thanks for your nice Vue.js tutorial. 🙏

[@TylerPotts]

You are welcome

[@mostmojo]

bangin' m8, thanks for that. Learned a lot :) Wish we could build a game in Vue!

[@TylerPotts]

I have a video on building a game in Vue 😂 can't remember which one it is but it's recent

[@asishraz6173]

You made it simple, though not for beginners. I genuinely loved it and will re-visit again for more clarification.
Thank you so much for making this sharable amongst us.

[@TylerPotts]

Glad it was helpful!

[@Wilhelm_LAS]

Among us

[@monarchgam3r]

Love from Nigeria 👍🏾

[@ndrewhas]

Excellent work, thank you! I'm seriously hooked on your channel! I just wanted to add that if we move the checks from the template to the computed properties, then the template looks cleaner

[@TylerPotts]

Thanks for that!

[@ahmadfirdaus9423]

the real frond end, good job

[@TylerPotts]

Thanks

[@rainzeewang]

Super useful I hope you can come up with more basic tutorials

[@caucasianrider]

You are amazing bro, same website different technologies so we understand it better

[@TylerPotts]

Thanks and welcome

[@750Kviews]

Slick Design man

[@TylerPotts]

Thanks!

[@amjadal-hallak3145]

thank you Mr.

[@dusvirymarin9025]

wonderful!!!!1 thanks

[@jeury3012]

Great video!
for the dateBuilder() method consider using moment.js... you could do something like:
dateBuilder() {
return moment().format('dddd D MMMM YYYY');
}
cheers
edit:
install moment by doing `npm install moment --save`
then import it in your App.vue file `import moment from 'moment';`

[@SpencerDavis2000]

great tutorial thank you :-)

[@TylerPotts]

You are welcome!

[@szebasztianlukity8705]

Hey Tyler. Great project, loved it. I just wanted to point out that you should think about increasing the font size. Keep up the good work!

[@TylerPotts]

Thanks for the tip!

[@larry9556]

Was not expecting Northampton to get a shoutout in this vid, went from a 9/10 to a 10

[@ranzorethor5295]

Great tutorial! Random question, where did you get that desktop wallpaper? I wanted something just like it but couldn't find one anywhere.

[@kivi6825]

perfect video :d

[@TylerPotts]

Thanks!

[@readerrabbit6690]

Please note that removing the &units=metric entirely will return the temperature as Kelvin. To get Fahrenheit use &units=imperial

[@DeLvoy1988]

You can first set 'weather' as null, so to display a div you need only v-if="weather", weather will be as a true after fetchWeather method

[@sanghoonkim339]

I'm Vue beginner and Thank you for your awesome video!! I'm in discord channel also. I like your speed of video. Have a nice day.

[@TylerPotts]

Awesome, thank you!

[@carlosmartinezsanchez2144]

what a CSS master

[@TylerPotts]

Thanks! 😂

[@Lamberson_]

thank u so much

[@Pages_Perfected]

Nice video and very nice accent !

[@awreckingball]

Few looks cool.

[@user-nd2pv6ip5l]

cool!!!!!!!!!!
I like that!

[@jasonma1904]

Nice tutorial.

[@TylerPotts]

Thanks!! :D

[@captainezchord]

Awesome work! Do you think you could make one that elaborates on the function that fetches and sets the API data?

[@dimitrisandroid6483]

Thank you a lot!
I have 15.6 inches monitor and the letters of the code seem small and not easy to read. Is it possible to enlarge the fonts or anything other to fix it?
If not, ok I can zoom my browser.

[@trojan606]

thank you

[@ELGANDUZ]

Hello,
I followed the video (only used different API) and the weather object is always undefined, by doing some testing seems like the method .setResults doesn't get executed.
Anyone can help me?

[@rafaeldias7292]

thanks bro

[@TylerPotts]

Any time

[@baldbankrupt]

Hey, great video!!
Instead of fetching the results and push it with another function to the weather object I'd use an async function for both of it:
async fetchWeather(e){
if (e.key == "Enter") {
let response = await fetch(`${this.url_base}weather?q=${this.query}&units=metric&APPID=${this.api_key}`);
let json = await response.json();
this.weather = await json;
}

[@TylerPotts]

Thanks

[@alekkendoge]

.then() call automatically awaits for the prev async function to finis

[@murtazanoori6414]

is it possible to change the video background instead of image ? i mean accouding to the weather condation ? if yes can you help me please ?

[@sagheerhussain3573]

Which event i have to used instead of keypress to show weather automatically after user enter city

[@00el04]

where did you get weather.main? is that on the API response?

[@internetkids5813]

Thank you

[@TylerPotts]

🙌

[@illestoth9298]

Is it possible to make the search field autocomplete and that it gave some suggestions in a dropdown list?

[@AswinHaridasOne_77]

How do we make live search results below the search bar as we type?

[@quangtampham6003]

Sorry,
May I ask what font color you are using ( One Dark Pro ) ?? Thanks

[@ayxan3950]

Təşəkkürlər

[@leonardpalma6483]

Is it safe to put your api key in a data object/method in a Vue application?

[@carlosync]

which vs code theme were you using ? Very good video