Build a Todo List App in Vue JS with LocalStorage in 2022 | Vue 3 for Beginners
Vložit
- čas přidán 7. 09. 2024
- Learn how to build a Todo list application in 2022 with Vue JS and the composition API. You will learn the basics of Vue Composition API along with some more advanced features such as LocalStorage for saving data to the browser.
Source code: github.com/Tyl...
// JOIN THE DISCORD SERVER!
/ discord
// BECOME A MEMBER TO UNLOCK MORE CONTENT!
www.youtube.co...
// 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
Screenbar Light: amzn.to/3iFRS7w
All of these products I own and have tested!
// FOLLOW ME ON TWITTER
/ tyler_potts_
// INTERESTED IN GAME DEV?
Game development channel: / muddywolf
// CHECK OUT MY GAME
play.google.co...
// DO THESE SIMPLE STEPS
LIKE, SUBSCRIBE & SHARE
Thanks for already including CSS. Helps to focus on the Vue logic and functionality.
You are welcome!
@@TylerPotts glad to see your tutorial video very useful...🥰
Thanks for this, as a beginner I found this was perfectly for my skill level and learnt a lot!
Good video, I would say it feels like you go through it pretty quick, found myself pausing and coding along a lot more than others. I'd also say it feels a little bit above beginners level just on the explanation on what everything does
Thanks I'll take your feedback into consideration for my future videos! :D
@@TylerPotts yeah your explanations completely suck. you might as well take the time to go over what each part is properly doing, instead of saying "we do this, do that", especially if your video is catered towards beginners.
i slowed the video to 0.75 and it was still too fast xD
Дякую, друже!
Загалом все зрозуміло. Спробую розділити все це на компоненти, щоб нічого не зламати :)
Thank you for this video; I loved your coding approach, which is straightforward and efficient - exactly what we desire! Well done. However, a small notice: for beginners, please speak more slowly. I'm looking forward to seeing the other content you can share.
An other perfect Vue App Thanks!
Thank you!
Hey Tylor, thanks for the explanation! While the video was informative, I felt a bit clickbaited by the thumbnail mentioning editing todos. It would be helpful if the video mentioned that aspect too, or the thumbnail could be adjusted to better reflect the content. Thanks!
Excelent tutorial bro!!! Thnks for everything!!! Hope new tutorial with Firebase!
Thanks for the tutorial mate! Awesome content!
Pretty cool. I would just add another verification inside addTodo function = if (inputContent.value === "" || inputContent.value.trim() === "" || inputCategory.value === null) return
thank you very much for the code it helped me a lot
Thank you teacher ❤, Would you share me your suggestion or extension?
Thank you. I've completed this tutorial. It's my fist vue project. Question: In removeTodo why aren't you using something like removeItem to remove it from the local storage?
Very Good Video Thanks, But I have A error in computed
Unexpected side effect in computed function
Thanks for the concise and educational video.
Anyone know this error?
Unexpected side effect in computed function vue/no-side-effects-in-computed-properties
in watch function it shoud be first parameter should be () => todos.value and () => name.value
Awesome videos, thank you very much!
Thanks. This is really helpful.
❤ well it helped a lot
Please come up with more Vue projects, there's very less content of Vue on CZcams
Cool video Tyler. Do you have any tips on using Web Components in Vue3?
Thank you very much 🎉
You're welcome 😊
thank you! easy to follow
Glad it helped!
Soooo soothing to listen to your voice bruh 😂
Hi, I am trying to learn Vue.js. I wish you had added all the details on the way you tested your codes in the console to teach us how to test our code. By the way your to do lest is not an ascending list which means to list the "todos " from the task which is done first to the task which is done next. So your todo list must be in the order make a video then Eat lunch and then test is you want to list them in ascending order based on the a TIME
Hello sir, your video is really helpful.
what if we want to click and drag any todo items to arrange the todos in our way/order?
Ok, i'm now getting a problem that todos are saved to local storage, but it get's cleared after F5 -.- name stays, todos not :/
Thanks for the cool video, but I don't really understand why the business and personnel categories are needed? what is their functionality?
It's just an example of adding categories to a to-do list you can disregard them and still get the functionality to work fine 😁
@@TylerPotts ok, thank you 😊
Excellent work keep up and share more knowledge
Awesome video, thanks!
Excellent Tyler !
Happy you enjoyed it
Thanks for the tutorial. For someone who knows how to use React and looking to learn Vue, this was helpful. Just wondering what theme are using on your VScode?
SynthWave '84
Great,it accepts links as well? You know this could be' useful to organizer and store remote resources
Yes, absolutely
Kick ass tutorial! Congrats!
wordke flawlessly, thanks
Thank you ,I learned a lot😀😀
Hi Tyler, would like to know if there's any follow up video on linking the vanilla javascript with local storage?
Hey Matthew, I've done an updated version of todo app with local storage here: czcams.com/video/6eFwtaZf6zc/video.html
thanks the video
do u plan to develop google calendar implementation for this todo app?:)
It looked like you were writing in JavaScript and it automatically was converting it to proper HTML. What were you using to accomplish that? How can I set my environment to work like yours?
Please take more time in explanation , It would be great
very nice one, thanks for sharing !
Thank you so much !
Unexpected side effect in computed function on computed
I have a question, it is stored in localstorage of the browser, but where is it exactly ? I mean in my device folders, Chrome then where?
I saw it in inspect key value but couldn't find it in my device.
Works good, tnx
hello sir whats the recommended syntax highlighting for vue
How do you have your VScode suggesting whole lines of code like that? @18:29
great video
Thanks ! for a total newbie i got a clear idea of everything that you explained , just one question what's the extension or tool that was auto completing your code ?
I'm thinking Github Copilot but, it could just be another Eslint extension for Vue
@@nwachukwuexcel Thanks for yout comment... hadn't heard of github autopilot but just got it now and it seems amazing. Just on a 2 month free trial but may well pay for it as it seems so useful
What theme are you using?
'todos_asc' is declared but its value is never read.Vetur(6133)
anyone else having the same issue? I'm trying to figure this out. Also, installed eslint and volar (replacement of vetur) but no success yet
Thanks so much for the video Tyler.
I just started learning Vue and what a fun project to work on!!! :)
However, I think the todo input is restricted to a certain string length, I wouldn't know if I added this somewhere
what color theme are you using?
I'm looking for it too, did you find it?
@@junderfitting8717 no unfortunately not :(
@@mikareich3388 I wathed Tyler's video's about color theme. He use SynthWave '84 and Aura Theme
Liked the video and Smashed the Subscribe button!!!
Does this have within it an example of a parent component being passed to a child? just wondering
watch(name, (newVal) => {
localStorage.setItem('name', newVal)
})
name deprecated. also when i see application is not store the name.
Do you need to always upload a new version of a Vue website or can you update individual pages
Interesting topic, so personally I use something called FTP Sync that will only update the modified files, so when you build your vue project you can hit sync and it'll only push the files that have changed.
@@TylerPotts thanks, could you please make a video about it
Thank you so much. I like your code colors! What is name of the theme?
I think it's "SynthWave '84" from extended list of themes
@@eugenevorobyev i use the same one and it took me a while to realize we both use it lol
It's "Synthwave Refined" !
It's good🎉
hi may I ask what extension do you use for intelisense.
github copilot (freemium)
Wonderfullllllll :)
Glad you like it!
Sorry for the typing errors.😮
Is the local storage permanent?
I mean if u close the app and reopen it, do the data load or are they gone?
It is stored in your browser, it will remain there until you delete it manually or by an app.
can you put it on firebase?
or you can just use .shift instead of .push
is anyone else having his todos sorted from oldest first to newest or just me ?
const todos_asc = computed(() => todos.value.sort((a,b) =>{
return b.createdAt - a.createdAt
}))
Dude, you're WAY too fast, I had to stop the video like 100 times. But thanks for it, though. It taught me something.
It helps to watch on .75 playback speed haha
Where is your styles?
in the css file.
M8 it's a gr8 video, super cool, but just to notice you are toooo fast , try little slower next time XDDDD
bookmarked
todos_asc = Todos Asynchronous 😂
is it for begginers? really? xd this is for intermediate users omg....
You jump up and down too much, my shit is not working and idk why
You really need to work on editing your videos. It's maddening to watch you CONSTANTLY re-word or re-explain everything. It's tiring and confusing.
Great tutorial! Thanks a lot.