Vue 3 & Composition API - Full Project
Vložit
- čas přidán 18. 05. 2024
- Build an expense tracker application from scratch using Vue.js 3 and the composition API with the latest syntax from version 3.2.
Final Code:
github.com/bradtraversy/vue-e...
Vanilla JS Project Repo:
github.com/bradtraversy/vanil...
Blog Post:
www.traversymedia.com/blog/vu...
Check Out My Courses:
traversymedia.com
Timestamps:
0:00 - Intro & Demo
3:21 - Vue.js Setup
4:57 - File Structure
7:44 - Boilerplate Clean Up
9:06 - Create Component Files & Templates
12:30 - Create and import Components
18:50 - TransactionList Display
28:37 - Transactions in Global State
30:12 - Pass & Recieve Props (defineProps)
32:30 - Balance Component & computed()
37:21 - Income & Expenses Component
42:34 - AddTransaction Form Component
44:58 - Binding Form Inputs
46:41 - Validation & Toasts
52:05 - Emit Custom Events (defineEmits)
54:45 - Add Transaction to State
59:30 - Deleting Transactions
1:03:30 - Fetch From Local Storage & OnMounted()
1:06:09 - Save to Local Storage - Věda a technologie
Vue JS soo easy to implement especially in composition API. I prefer it more over react.
It really is super straightforward. I love React, but there are a lot of quirks to get used to.
Me too. 👍🏾👍🏾👍🏾
In the world of popularity, I decided to stick with VueJS , Thank you so much Mr. Brad for another inspirational video.
ya me too. I am going to stick with them.
@@wovasteengova me too, the only true community based frontend framework while react lost it way and svelte got bought up
Glad you are still uploading Vue JS content.. Thank's Brad !
No problem. Thanks for watching! I will be doing a Vue course at some point next year. Which also means more Vue CZcams content as well.
WOW! 🤩@@TraversyMedia
@@TraversyMedia pleaseeeee do it !!!! Even in your website , we will buy and support
My god I love Vue. I had to use react for a company project for a year and every second I thought there is an easier way in Vue
I tried to learn react 4 times, every time I get bored to death and feel no joy at all, I use at my work sometimes to adjust some projects from the guys that leave, my boss just decided to use Vue with our Laravel projects and I'm really happy about it!
I've been watching your videos for a while now. It was your videos that got me started on programming. 5 years laters, you're still cranking out banger content. Thanks!
Glad to see you again in this new Vuejs tut. Pretty awesome, and thanks so much Mr. Brad
Thank you! I started to learn vue recently after more than 15 years of not working with web technologies and was confused about a lot of things. I followed religiously the instructions of your other vue video but I was still confused and learning the "setup" style. This video answered my questions, now I clearly understand the purpose. Again, thank you!
Great tutorial!
I'm new to Vue and even though I had already seen all the stuff you showed, it was really good to understand better the composition API.
Also, it's always good to see tutorials with a nice UI and covering all functionalities like that
just trying this vue tutorial 3 days ago and finally I can understand about the props and emits concept. such a great and amazing video. I hope you can continue the tutorial of vue 3. thanks you so much
I finished your JS from scratch course a few weeks ago and started doing projects, got the hang of it and tried React . Wasn't my cup of tea, especially having used SvelteKit a bit, but Vue, I like their background story a lot and I picked it up yesterday and It just happened that you uploaded a Vue 3 video. Awesome! Thank you!
Great demo as always - well paced and full of relevant real-word content. Thanks !
Ive been building a passion project in Vue the last year! Cant wait to use this toast lib to add a little pazaz to my UI 😊 Thanks Brad!!
Thank you so much for creating this tutorial. A total beginner here and it's perfect.
Your tutorials are really easy to digest. That 1 hour just passed by so quickly.
Good to see you back with a Vue JS tutorial and the composition API for Vue's reactivity components.
❤. Just started learning Vue about a week ago
How’s your learning going so far?
I'm also learning vue js .. is it worth it. Cus. Of im scare about all these things
Wow so much straight forward since I am a React Developer I am impressed how the Vue works
Your explanation of these Vue's basic concepts is just so straightforward. Unlike some guys who will spend 100,000 years to describe it's features whatever before show me the practical usage.
Thank you Brad, thanks to you I got my first job as frontend developer 5 years ago, Your course for Vue.js helped me a lot with the interview and my first months there. Now I'm looking for a new position and I was looking for some recap in Vue 3 for my next job interviews and I found your video! I'm sure I'm going to repeat the same good luck :)
Coincidental that I decided to learn Vuejs properly today with your 2021 Vue js crash course, got to where you said you werent covering composition api, googled to see if you ended up making that separate vid, and whaddya know, published "3 days ago"
Thanks as always, Brad
Yeaaaaaaaa, best framework ever 🎉🎉🎉
Thank you for this! Really helpful for a crash course before an interview where they use Vue. Coming from React it was just a perfect overview, and plenty of times I went off to the docs and learnt something new about Vue. Thank you again Brad!
Great tutorial. specific and no boiler plate talks as always from you, like it 🙂
Excellent course, Brad! I just completed a Vue basics course on another channel and was going to start writing my own code right away but decided a little more practice would help, as would hearing things explained by a different person. I'm glad I went that way! I now understand several things better. As a huge bonus, you finally cleared up the difference between the options API, the composition API and the composition API with the tag, which had REALLY been confusing me in various examples I had been examining. That alone is going to make my future coding projects easier! I've done several of your courses now and they are consistently excellent so thank you VERY MUCH for doing what you do so well!
Looking forward to learning here
Wooow thanks Brad from Italy! I love vue, hope to see more video about that and vite + pinia
Thanks Brad, your content is excellent. Love your teaching style
Thanks for this tutorial, helped me transitioning from Vue 2 to Vue 3.
I have no choice but give a big like to this wonderful tutorial.
Excellent as always, much appreciated.
Thank you Brad, awesome content 😊
Absolutely great tutorial, mega well explained.
Just on point. 🎉 thank you
Great content as always Brad. Will be also awesome see some videos about Nuxt. Thanks Brad!!
Tutorial is awsome, just what i need!
Awesome job, please make more content with Composition API
I watched maybe a dozen different Vue 3 Composition API tutorials, and this is the one that made me really understand these concepts. Props, emits, life cycle functions... it's more than just a crash course. As always, Brad, you made my day and really showed how good your tutorials are. Your ability to teach is exceptional. The world is a better place because of you. Thank you for the video. I hope you will continue to enjoy creating content to make software really fun and understandable. Thank you again.
I strongly agree with you. Brad explains the concepts and practical in a very straight forward and concise way where I find other videos are long winded and confusing.
Thank you for your knowledge!
hands down the best teacher
I'm here just to say "Hi!" to Brad! You are awesome, as always!
Vue3+composition api❤❤❤
Best frontend framework!! Vue❤
This is very great, thanks Brad
Thank you so much Brad.
great video. now i can do the tasks of my job.
Awoohoo! Looking forward to coding along
Nice I know this is going to be great!
Once that music starts and your voice is heard.
My laptop says , let’s do this 🤟💙💪🏽☕️
Awesome!
Love this content. Vue is the way to go.
Thank you so much for this Vue tutorial
Thank you Brad!
You Explaination is awsome .... dear.... and also conent project is excellent.... keep it up dear
Thank you for the video ❤
Thanks for the good tutorial.
Thanks!!! great explaination. now to try it on my own 😜
Thanks, very cool project.
Love to see Vue content on your channel.
Want to se Nuxt 3 also. Make some fullstack projects in Nuxt 3.
Thank you ;)
Yeeesss a MEVN stack!
Thanks bro this was awesome
You have always been really good at explaining how things work. Just explaining simply, how the il hover and transition works was extremely helpful. I hate css; always confuses me.
Good video and perfect for someone that wants to get a better idea of how Vue works if you’re trying to incorporate it into your project.
ha, love it, Exactly what my next APP will be. But on top of what you have I will have supabase behind the data and quasar to help out with workflow and UI components
Good job my bro!
superb turtorial
Goated Lecture fr.
Огромное спасибо за написание небольшого приложения на Вью! Как раз после изучения документации хочется закреплять знания, что-то подглядывать у более опытных разработчиков 🤝
Chose Vue for work projects and haven't regretted it. Give it a shot!
I presume you work as a freelancer.
I love Vue and i love you content
thanks for the video
thank you so much
thanks for this tutorial! it's very helpfull!
Love Vue with composition api. It's also very similar to Svelte
thank you so much!
Thank you for your video. I'm new in Vue, and this tutorial taught me a lot of basics. I hope you can make better and better videos!
hey
Superb!
thank you
You are awesome... Like always ❤👍
Thanks you so much
THANK YOU
it's really good, helpfull video thanks vary much
Nice tutorial
Then only channel I just press like no matter I watch or not.
It's appreciated 👊
Vue is the best js frontend framework. the implementation is seamless
Brad loves from costa rica mate, hopefully one day i will appear on one of your videos.
Great content. Thank you! Can you please also create video of Vue3+ionic+capacitor?
Thanks😊
Great tutorial, I really enjoy it.
Just in case it's helpful to anyone, you can enable decimals with input of number types, by adding step attribute. For instance:
Thank you very much for the tutorial! 🌞
also add number modifier, v-model.number="amount", otherwise, the v-model will return a string
Thanks Brad. I hope some contents for Nuxt 3
Excellent
Great tutorial. Learning Vue for first time. @1:05:05, Coming from React, Vue seems easier
Thanks alot
Watching from Tanzania
jambo kaka 😂
brad is like that awesome older brother figure we never had, love you man thanks a lot for all these years
welcome back
Great!
Please can you create a content on API endpoint documentations.
Just an idea, Brad, but I had an idea that might appeal to you: with the finished program from this video as a starting point, revise it to incorporate Pinia for all state management and local storage. I'm thinking of making that change in my own code....
u are the beeeeeeeest ♥
I can remember using the compositional api 1 or 2 years ago without the script setup tag. However, besides the convenience of not having a components object it looks actually more unorganized than having the traditional structured default object.
I can see your point. I was a big fan of the options API and was turned off from the whole setup() function. I do like the new syntax though. I'm a big fan of the more vanilla-like just create variables and functions and they just work. It's really just preference. I'm glad the options API is still an option though. No pun intended lol
Fab! Will do this asap. Does it use pinia? Does it use components from a single external source? I was never able to understand how to make buttons, modals etc as reusable components in Vue3. :)
Really appreciate this tutorial. But which VSCode extensions do you use?
❤ Vue 😊
Que bien
Hi Brad, I am a bit confuse when writing defineProps, there is no variable call transactions but you can reference the transactions prop in the component.
edit: sorry, I rewatch and saw it. It is one level up from the type and required.