Build a Weather App in VueJS | Vue Beginner Tutorial

[@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

[@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?

[@ShadowDragon81621]

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!!

[@yafigamtina]

This guy's tutorials are so clear

[@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.

[@larry9556]

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

[@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!

[@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 ?

[@anurag3487]

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

[@RodneyKimbangu]

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

[@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';`

[@00el04]

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

[@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!

[@zaqueuorlando801]

This was a great one and supper easy to follow

[@TylerPotts]

Thank you!

[@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!

[@readerrabbit6690]

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

[@ahmadfirdaus9423]

the real frond end, good job

[@TylerPotts]

Thanks

[@carlosmartinezsanchez2144]

what a CSS master

[@TylerPotts]

Thanks! 😂

[@sampower7887]

Cheers for the refresher :D

[@ahmedouyahya]

Thanks a lot. You just earned another subscriber

[@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.

[@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!

[@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!

[@caucasusdweller]

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

[@TylerPotts]

Thanks and welcome

[@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

[@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!

[@anlkavuk9437]

Thanks for your nice Vue.js tutorial. 🙏

[@TylerPotts]

You are welcome

[@k303k]

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

[@mariocalcetin7602]

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

[@TylerPotts]

Thank you very much!

[@scientist.entity6609]

Thank you so much for doing this lesson also with vuejs

[@TylerPotts]

You're welcome!

[@joylearn2868]

Amazing typing skill and sweet language ❤

[@benjaminko7812]

Thanks for sharing! Please keep doing this tutorial

[@MissBoom135]

Really enjoyed this tutorial, thank you 😄

[@monarchgam3r]

Love from Nigeria 👍🏾

[@alloo12dal]

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

[@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!

[@wagnerfix]

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

[@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

[@ram-bk4mu]

mad skills man!

[@handsomecat7225]

Great tutorial. Thanks Tyler.

[@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

[@readerrabbit6690]

I suggest you should show how to access the returned json so we can better understand the elements available to be called. I know that's something perhaps considered rudimentary but it really only should take a few seconds to explain.

[@mohamedannajar3140]

Bro I love your tutorials thank you ^^

[@TylerPotts]

No, Thank you! :)

[@00el04]

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

[@a_rod1678]

Where do you get the url_base of openweather?

[@swapnilbhojane6922]

Really nice app you made...

[@faizboy101]

thank you Tyler. very informative.

[@caiojns]

Brilliant tutorial mate. Really good indeed!

[@TylerPotts]

Thank you! Cheers!

[@ministersport]

Thank you bro, so useful video!

[@TylerPotts]

Glad it was helpful!

[@canerdemircigm]

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

[@al_peterson]

thanks for the tutorial! great stuff!

[@TylerPotts]

Glad it was helpful!

[@jjkelsey1180]

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

[@hackathon-bestmostar273]

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

[@vladharanich]

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

[@TylerPotts]

Hero!

[@rogerpantil9483]

nice tutorial, had to put it at 0.5 - 0.75 speed to follow up xD

[@taylorfreeman7782]

Great stuff! Thanks Tyler.

[@elitedesignhub415]

This tutorial is wonderful 💯🔥🔥🔥❤️

[@TylerPotts]

Thank you 🙌

[@HansNiemann762]

Disclaimer : Half the Video is just CSS

[@nishantgupta1854]

buy worth it bruh]

[@TylerPotts]

@@nishantgupta1854 Thank you! I never know if I should keep the css in or just do the CSS before the tutorial :/

[@nishantgupta1854]

@@TylerPotts Your videos really good. Thank you so much tyler .Please upload more in vue js

[@ashleyspianoprogress1341]

@@TylerPotts I recommend keeping the CSS explanation, but also saying something like "If you're not interested in the CSS you can copy it from GitHub and skip to XX:XX"

[@aleb687]

@@TylerPotts paste the chunk and quickly go through it explaining the main points. CSS is really tedious for non beginners

[@AfolabiJude]

Nigeria to the world!

[@nicolasbavamusic]

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

[@TylerPotts]

Thank you! You too!

[@charljones7266]

Really helped understand Vue, thanks

[@dfordemo981]

its beautiful

[@benzemafan67]

Really awesome and satisfying to code, 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?

[@vuejsdev]

I really appreciate your work, thank you.

[@elicoptericus]

I think you could have skipped the if key == enter by using the @keypress.enter shorthand. Edit: Also the entire fetchWeather method could be made a lot less verbose by using async/await. const res = await fetch(); this.weather = await res.json(); I know it's a beginners tutorial but it would be a nice example of using it for beginners too.

[@TylerPotts]

Very true next time I will keep both in mind! I know Asynchronous throughs people off!

[@incredibleindians4872]

@@TylerPotts i used keypress.enter :P

[@akashaj4660]

Thank you! Awesome Tuts

[@Latif127]

Awesome tutorial

[@CharithJayasanka]

Great and simple tutorial (y) Keep it up

[@cubedev4838]

Amazing, i found your channel today!!!

[@wixl4700]

nice little method to display the time of each place the user searches. curTime (){ var tdiff = this.weather.timezone; var vMili = tdiff * 1000; var x = new Date().getTime(); var z = x + vMili; var y = new Date(z).toISOString().slice(11, -8); return y; } just put {{ curTime() }} where you want to display it

[@danielpietschmann5294]

awesome tutorial! :)

[@rainzeewang]

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

[@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 :)

[@natarajana.v4262]

Thankyou So much for this sir.

[@Pages_Perfected]

Nice video and very nice accent !

[@khaireddinebouras4523]

Awesome Video !! Thanks

[@amjadal-hallak3145]

thank you Mr.

[@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

[@ranzorethor5295]

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

[@MM-um1sq]

that was awesome, thanks.

[@TylerPotts]

Glad you liked it!

[@leonardpalma6483]

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

[@brylleclarido]

I used the url_base you used. But it doesn't work for me. Where did you get the part for url_base?

[@gthotaku339]

yes please

[@tomasvaitkevicius4191]

make sure your url is correct, url_base has to end with the slash, check the console to see request url

[@dusvirymarin9025]

wonderful!!!!1 thanks

[@captainezchord]

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

[@ICSVortex-DCS]

Great video!

[@TylerPotts]

Thanks!

[@danieldonaldson8634]

as of 15 minutes in, this is a css tutorial. if you actually want a bud tutorial, watch the first minute, then skip to 15:30

[@hosseinghahremani1182]

Thanks Thanks Thanks for the awesome tutorial.

[@awreckingball]

Few looks cool.

[@quangtampham6003]

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

[@GrungeLyrics]

great video!

[@atila5974]

Can you make a video explaining how to change the background according to the description of the weather? Instead of a ternary with two options, maybe a method calling for many different pictures? Thanks in advance

[@illestoth9298]

You can make a ternary with 3-4 options too

[@warrenayiss3012]

I'm stuck at 22:13 I don't understand the error: localhost/:1 Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0 Promise.then (async) fetchWeather @ App.vue?234e:46 invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1854 invoker @ vue.runtime.esm.js?2b0e:2179 original._wrapper @ vue.runtime.esm.js?2b0e:6917

[@SpencerDavis2000]

great tutorial thank you :-)

[@TylerPotts]

You are welcome!

[@kivi6825]

perfect video :d

[@TylerPotts]

Thanks!

[@Hijra.ma_]

Thank you so much

[@dfordemo981]

how can do autocomplete all the cities in the search bar, how can we do that? 😊😊😊

[@iluu90sushi46]

Hey, thanks for your tutorial. Great job. But have a quastion. I do tha same task, but I have to take weather forecast for 5 days, so in API call I change (from weather to forecast) and nothing. can't view data from json. For example: weather.city.name, and nope. Nothing on screen. need a help

[@blackpelican5205]

Nice video and all, but jesus, that intro music belongs to 2014 lol