Build a Weather App in VueJS | Vue Beginner Tutorial
Vložit
- čas přidán 7. 09. 2024
- 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 CZcams
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/Tyl...
FOLLOW ME ON TWITTER!!!
/ tyler_potts_
LIKE, SUBSCRIBE & SHARE
Music
DEAF KEV - Invincible (NCS Release)
Neffex - Grateful (NCS Release)
Wonderful tutorial! Please keep it up, the world needs more of this ❤
Thank you! :D
This was my first vue tutorial and this guy explained everything great
just completed my second project of the day thanks to you! such a great feeling of accomplishment!
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?
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';`
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!!
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;
}
Thanks
.then() call automatically awaits for the prev async function to finis
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 ?
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.
Please note that removing the &units=metric entirely will return the temperature as Kelvin. To get Fahrenheit use &units=imperial
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.
Glad it was helpful!
Among us
Great video, easy to follow style, if people don’t want to see the CSS they can skip through!
Glad you liked it!
Was not expecting Northampton to get a shoutout in this vid, went from a 9/10 to a 10
This was a great one and supper easy to follow
Thank you!
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!
Thanks for the tip!
Just found out your channel, subbed! I hope you can do more of these Vue.js videos in the future Tyler!
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
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.
Thank you! Helped my understanding of Vue. I would also appreciate if you make a video where props are passed between components in Vue
This guy's tutorials are so clear
what a CSS master
Thanks! 😂
Thank you so much for doing this lesson also with vuejs
You're welcome!
You are amazing bro, same website different technologies so we understand it better
Thanks and welcome
Legendary, my friend! I was looking for reasons not to use Vue js, but you gave me reasons to. Thank you!
you're very fast and quick in CSS, subbed :)
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!
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!
Awesome, thank you!
Where do you get the url_base of openweather?
Thank you so much, great example. This help me for to learn vue more.
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.
Awesome, thank you!
Thank you very much Tyler, it's amazing how fast you build. greetings from Chile .
Thank you very much!
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.
the real frond end, good job
Thanks
Great Tutorial! This really helps understand the inner workings of vue with the fetch API
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
Thanks for that!
where did you get weather.main? is that on the API response?
Thanks a lot! Becuase of you i've done created this beautiful weather app.
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
Thanks for sharing! Please keep doing this tutorial
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.
Very true next time I will keep both in mind! I know Asynchronous throughs people off!
@@TylerPotts i used keypress.enter :P
Thanks for your nice Vue.js tutorial. 🙏
You are welcome
Thanks a lot. You just earned another subscriber
nice tutorial, had to put it at 0.5 - 0.75 speed to follow up xD
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 :)
same opinion
Thank you so much
Thank you so much, Tyler. This is a really great tutorial :D
Nigeria to the world!
Nice, you really helped me to understand vue.js more clear.
Love from Nigeria 👍🏾
Amazing typing skill and sweet language ❤
Really enjoyed this tutorial, thank you 😄
thank you Mr.
thank you, it's really good idea for an app. Already subscribed and pushed the like button :)
Hero!
for starting to the vue this is great tutorial. Thanks.
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?
Really nice app you made...
Cheers for the refresher :D
Thank you very much!! very clear and very interesting. have a nice day!! :))
Thank you! You too!
This tutorial is wonderful 💯🔥🔥🔥❤️
Thank you 🙌
Thank you bro, so useful video!
Glad it was helpful!
thank you Tyler. very informative.
wonderful!!!!1 thanks
Great tutorial! Random question, where did you get that desktop wallpaper? I wanted something just like it but couldn't find one anywhere.
Brilliant tutorial mate. Really good indeed!
Thank you! Cheers!
Great tutorial. Thanks Tyler.
Super useful I hope you can come up with more basic tutorials
Is it safe to put your api key in a data object/method in a Vue application?
Bro I love your tutorials thank you ^^
No, Thank you! :)
thanks for the tutorial! great stuff!
Glad it was helpful!
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
You can make a ternary with 3-4 options too
Really awesome and satisfying to code, thank you !
bangin' m8, thanks for that. Learned a lot :) Wish we could build a game in Vue!
I have a video on building a game in Vue 😂 can't remember which one it is but it's recent
mad skills man!
its beautiful
thanks bro
Any time
I really appreciate your work, thank you.
Can you make one video on how to convert this to a PWA ? Amazing video there tho 😮
Thankyou So much for this sir.
Təşəkkürlər
Really helped understand Vue, thanks
Nice video and very nice accent !
thank you
Slick Design man
Thanks!
Great stuff! Thanks Tyler.
Sorry,
May I ask what font color you are using ( One Dark Pro ) ?? Thanks
since the situation with moment js, a better alternative is luxon js, did my date in 3 lines
Few looks cool.
Disclaimer : Half the Video is just CSS
buy worth it bruh]
@@nishantgupta1854 Thank you! I never know if I should keep the css in or just do the CSS before the tutorial :/
@@TylerPotts Your videos really good. Thank you so much tyler .Please upload more in vue js
@@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"
@@TylerPotts paste the chunk and quickly go through it explaining the main points. CSS is really tedious for non beginners
how can do autocomplete all the cities in the search bar, how can we do that? 😊😊😊
Hi, nice tutorial, but I have a question:
at minute 20:00 you define setResults method with (results) parameter... but three line up of that you call the same method this.setResults without passing any parameters... how it can works.. i'm newby sorry, sorry for my question
Yeah,I was wondering too
I used the url_base you used. But it doesn't work for me. Where did you get the part for url_base?
yes please
make sure your url is correct, url_base has to end with the slash, check the console to see request url
thank u so much
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 :)
Great and simple tutorial (y) Keep it up
Thanks Thanks Thanks
for the awesome tutorial.
Amazing, i found your channel today!!!
Nice video and all, but jesus, that intro music belongs to 2014 lol
Awesome design! I want to develope same app!
Do it!! 😁
@@TylerPotts I do it today! :))
Thank you! Awesome Tuts
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.
Awesome work! Do you think you could make one that elaborates on the function that fetches and sets the API data?
great tutorial thank you :-)
You are welcome!