Build a Todo List App in Vue JS with LocalStorage in 2022 | Vue 3 for Beginners
Вставка
- Опубліковано 23 сер 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 UA-cam
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
Thanks for the tutorial mate! Awesome content!
An other perfect Vue App Thanks!
Thank you!
Дякую, друже!
Загалом все зрозуміло. Спробую розділити все це на компоненти, щоб нічого не зламати :)
thank you very much for the code it helped me a lot
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.
Thank you very much 🎉
You're welcome 😊
Thanks for the concise and educational video.
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!
Excellent Tyler !
Happy you enjoyed it
Awesome videos, thank you very much!
Thanks. This is really helpful.
Thank you teacher ❤, Would you share me your suggestion or extension?
thank you! easy to follow
Glad it helped!
Please come up with more Vue projects, there's very less content of Vue on UA-cam
Kick ass tutorial! Congrats!
Awesome video, thanks!
❤ well it helped a lot
Excelent tutorial bro!!! Thnks for everything!!! Hope new tutorial with Firebase!
Very Good Video Thanks, But I have A error in computed
Unexpected side effect in computed function
Pretty cool. I would just add another verification inside addTodo function = if (inputContent.value === "" || inputContent.value.trim() === "" || inputCategory.value === null) return
Great tutorial! Thanks a lot.
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?
Thank you ,I learned a lot😀😀
Excellent work keep up and share more knowledge
very nice one, thanks for sharing !
Soooo soothing to listen to your voice bruh 😂
Anyone know this error?
Unexpected side effect in computed function vue/no-side-effects-in-computed-properties
Cool video Tyler. Do you have any tips on using Web Components in Vue3?
wordke flawlessly, thanks
in watch function it shoud be first parameter should be () => todos.value and () => name.value
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?
Thank you so much !
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 😊
thanks the video
do u plan to develop google calendar implementation for this todo app?:)
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?
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
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
Please take more time in explanation , It would be great
Works good, tnx
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.
Sorry for the typing errors.😮
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: ua-cam.com/video/6eFwtaZf6zc/v-deo.html
Great,it accepts links as well? You know this could be' useful to organizer and store remote resources
Yes, absolutely
What theme are you using?
great video
hello sir whats the recommended syntax highlighting for vue
How do you have your VScode suggesting whole lines of code like that? @18:29
Unexpected side effect in computed function on computed
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
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.
'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
It's good🎉
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
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
Liked the video and Smashed the Subscribe button!!!
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" !
Wonderfullllllll :)
Glad you like it!
can you put it on firebase?
hi may I ask what extension do you use for intelisense.
github copilot (freemium)
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.
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
M8 it's a gr8 video, super cool, but just to notice you are toooo fast , try little slower next time XDDDD
You jump up and down too much, my shit is not working and idk why
bookmarked
is it for begginers? really? xd this is for intermediate users omg....
Where is your styles?
in the css file.
todos_asc = Todos Asynchronous 😂
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.