Vue 3 & Composition API - Full Project
ฝัง
- เผยแพร่เมื่อ 8 ก.พ. 2025
- Build an expense tracker application from scratch using Vue.js 3 and the composition API with the latest syntax from version 3.2.
3-Hour Vue.js Crash Course:
• Vue.js Crash Course 2024
Final Code:
github.com/bra...
Vanilla JS Project Repo:
github.com/bra...
Blog Post:
www.traversyme...
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
![Vue 3 Composition API Introduction [FULL TUTORIAL]](http://i.ytimg.com/vi/bwItFdPt-6M/mqdefault.jpg)
![Vue 3 Composition API Introduction [FULL TUTORIAL]](/img/tr.png)
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
@@shawnshaw9859 wait, svelte got bought? :0 by who?
two years ago I had a choice: Vue or React. I made a mistake by choosing latter, trying to fix it now :)
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.
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 TH-cam content as well.
WOW! 🤩@@TraversyMedia
@@TraversyMedia pleaseeeee do it !!!! Even in your website , we will buy and support
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.
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!
This is my first project. I tried Udemy's boot camps but the way they taught me the fundamentals without implementing them somewhere for visual understanding. It wouldn't stick, then I came across this video and decided to give it a try.
I literally learned how to make functions, arrays, etc. When I would mess something up, the app would tell me through the localhost, and I would backtrack step-by-step with the video only to find that I would miss a comma on a function or place an array in the wrong area.
Thanks, I recommend this to anyone who is just starting and wants to learn!
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!
my favorite TH-cam Channel "Traversy Media", Thanks Brad for making my journey ease.
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!
Good to see you back with a Vue JS tutorial and the composition API for Vue's reactivity components.
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
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
Thank you Brad for all your Videos, I was a Java Backend developer earlier and your Angular and Js videos helped me to become as a full stack Developer. Whenever i finished watching your videos. I always felt confident that , i can do something with the topics i learned and implemented it .
Your concepts explanations are Crisp and clear.
I wish you , have a good health and all the best...
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!
Thanks for this tutorial, helped me transitioning from Vue 2 to Vue 3.
Yeaaaaaaaa, best framework ever 🎉🎉🎉
I have no choice but give a big like to this wonderful tutorial.
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
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. 👍🏾👍🏾👍🏾
yeah, that’s the reason I’m switching to Vue from React now
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!
Wow so much straight forward since I am a React Developer I am impressed how the Vue works
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
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!
Glad to see you again in this new Vuejs tut. Pretty awesome, and thanks so much Mr. Brad
❤. 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
Your tutorials are really easy to digest. That 1 hour just passed by so quickly.
Your videos about VueJS tutorial videos are helpful for the beginners like me. Thank you!
Great tutorial, as I’m new to Vue I was not aware of emits, now I am, and they’ re exactly what I need!
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 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!
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.
Please make more videos like this on vue 3 projects. They are very helpful.
Thank you!
Brad, if you create a zero to hero course about VUE, I'd be the 1st person to purchase it.
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!!
Great! This is the perfect initial course to start with Vue! Thanks a lot!
31:12 defineProps is macro available in script serup - no need for importing it :)
awesome job with the tutorial :D
Chose Vue for work projects and haven't regretted it. Give it a shot!
I presume you work as a freelancer.
Best frontend framework!! Vue❤
Thank you very much Mr. Brad for what you are doing. You summarized on this tut what i could have spent hours. many thanks
Great tutorial. specific and no boiler plate talks as always from you, like it 🙂
I'm here just to say "Hi!" to Brad! You are awesome, as always!
Great demo as always - well paced and full of relevant real-word content. Thanks !
Thank you so much for creating this tutorial. A total beginner here and it's perfect.
Then only channel I just press like no matter I watch or not.
It's appreciated 👊
brad is like that awesome older brother figure we never had, love you man thanks a lot for all these years
Wooow thanks Brad from Italy! I love vue, hope to see more video about that and vite + pinia
"Your tutorial was incredibly helpful and wonderfully presented! Thank you for sharing such valuable knowledge in such a cool way."
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
Thanks Brad, your content is excellent. Love your teaching style
Awesome job, please make more content with Composition API
Thank you so much for the tutorial. You always make our lives a lot easier!
Love this content. Vue is the way to go.
I bought your course but I did not find a full VUE 3 project with authentification. I would have loved to learn more and start on the right path. I know you had one with old vue.
Looking forward to learning here
hands down the best teacher
Vue is the best js frontend framework. the implementation is seamless
Vue3+composition api❤❤❤
Excellent as always, much appreciated.
Watching from Tanzania
jambo kaka 😂
Brad is savage!
Dope tutorial as always
Keep it up bro
Thanks Brad, once again great content!
You Explaination is awsome .... dear.... and also conent project is excellent.... keep it up dear
Great content as always Brad. Will be also awesome see some videos about Nuxt. Thanks Brad!!
Thanks sir. Another masterpiece ❤❤
gracias
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
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
This is very great, thanks Brad
Great tutorial. Learning Vue for first time. @1:05:05, Coming from React, Vue seems easier
great video. now i can do the tasks of my job.
Awoohoo! Looking forward to coding along
Thank you Brad, awesome content 😊
Brad loves from costa rica mate, hopefully one day i will appear on one of your videos.
Absolutely great tutorial, mega well explained.
Thank you for your nice lesson. It helped me a lot.
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....
Thanks for the good tutorial.
I love Vue and i love you content
Just on point. 🎉 thank you
This is awesome, thank you!
Goated Lecture fr.
Thank you so much Brad.
Great content. Thank you! Can you please also create video of Vue3+ionic+capacitor?
Wonderful content.. Thanks' Brad !
Love Vue with composition api. It's also very similar to Svelte
Thanks!!! great explaination. now to try it on my own 😜
Thank you for your knowledge!
Thank you for the video ❤
Thank you Brad!
please make a video about Vue Flow
You are awesome... Like always ❤👍
Thank you so much for this Vue tutorial
Thanks Brad. I hope some contents for Nuxt 3
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. :)
Thanks, very cool project.
Good job my bro!
❤ Vue 😊
Thanks bro this was awesome
nice tutorial and thanks man.
thank you