Build a Todo List App in Vue JS with LocalStorage in 2022 | Vue 3 for Beginners

[@edkinge1531]

Thanks for this, as a beginner I found this was perfectly for my skill level and learnt a lot!

[@zalodias123]

Thanks for already including CSS. Helps to focus on the Vue logic and functionality.

[@TylerPotts]

You are welcome!

[@nangseakheng2976]

@@TylerPotts glad to see your tutorial video very useful...🥰

[@aldotube88]

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

[@TylerPotts]

Thanks I'll take your feedback into consideration for my future videos! :D

[@kapo5636]

@@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.

[@sofiad.698]

i slowed the video to 0.75 and it was still too fast xD

[@nato.musica]

Awesome videos, thank you very much!

[@waleedcodes1422]

An other perfect Vue App Thanks!

[@TylerPotts]

Thank you!

[@jackwang3093]

Thanks for the tutorial mate! Awesome content!

[@jaloliddinumariy2025]

Very Good Video Thanks, But I have A error in computed Unexpected side effect in computed function

[@haamidshamim9858]

thank you very much for the code it helped me a lot

[@jrv660]

Anyone know this error? Unexpected side effect in computed function vue/no-side-effects-in-computed-properties

[@yugeyuge8008]

Thanks for the concise and educational video.

[@jonyparker2279]

Thanks. This is really helpful.

[@elian-dev]

Awesome video, thanks!

[@robimuhammad95]

thank you! easy to follow

[@TylerPotts]

Glad it helped!

[@casaderemador]

Kick ass tutorial! Congrats!

[@nadetdevfullstack7041]

Excellent Tyler !

[@TylerPotts]

Happy you enjoyed it

[@ЮрійЮрійович-м9т]

Дякую, друже! Загалом все зрозуміло. Спробую розділити все це на компоненти, щоб нічого не зламати :)

[@gleb.stachev]

Thanks for the cool video, but I don't really understand why the business and personnel categories are needed? what is their functionality?

[@TylerPotts]

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 😁

[@gleb.stachev]

@@TylerPotts ok, thank you 😊

[@dicodidiraja]

wordke flawlessly, thanks

[@AbdullahKhan-js2oz]

❤ well it helped a lot

[@paulaneesh7]

Please come up with more Vue projects, there's very less content of Vue on KZbin

[@nikhilgupta9876]

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?

[@kenweb27]

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?

[@ai-bloggers]

Thank you very much 🎉

[@TylerPotts]

You're welcome 😊

[@MarkJosmilDegamo]

hello sir whats the recommended syntax highlighting for vue

[@d-landjs]

Excelent tutorial bro!!! Thnks for everything!!! Hope new tutorial with Firebase!

[@2310karyn]

very nice one, thanks for sharing !

[@abletoneverything3913]

How do you have your VScode suggesting whole lines of code like that? @18:29

[@NeverDieAgl]

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 :/

[@Yakuzanis]

Thank you so much !

[@newtonkimathi5141]

Excellent work keep up and share more knowledge

[@Hamida-j7o]

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!

[@matthewtang5638]

Hi Tyler, would like to know if there's any follow up video on linking the vanilla javascript with local storage?

[@TylerPotts]

Hey Matthew, I've done an updated version of todo app with local storage here: kzbin.info/www/bejne/bJapqKeXj8tpsMU

[@danielkovacs3664]

thanks the video do u plan to develop google calendar implementation for this todo app?:)

[@shimakara]

Thank you ,I learned a lot😀😀

[@FitHealthyandInShape]

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?

[@TheanIDE]

Thank you teacher ❤, Would you share me your suggestion or extension?

[@rohitkf8474]

Soooo soothing to listen to your voice bruh 😂

[@Pages_Perfected]

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.

[@shiratorr]

What theme are you using?

[@mikareich3388]

what color theme are you using?

[@junderfitting8717]

I'm looking for it too, did you find it?

[@mikareich3388]

@@junderfitting8717 no unfortunately not :(

[@junderfitting8717]

@@mikareich3388 I wathed Tyler's video's about color theme. He use SynthWave '84 and Aura Theme

[@ManuMarea]

Great,it accepts links as well? You know this could be' useful to organizer and store remote resources

[@TylerPotts]

Yes, absolutely

[@tomtakumi]

Cool video Tyler. Do you have any tips on using Web Components in Vue3?

[@rasen-shuriken]

in watch function it shoud be first parameter should be () => todos.value and () => name.value

[@adelinewebdev6503]

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.

[@faridehgorji2586]

Sorry for the typing errors.😮

[@araputrevor5103]

Do you need to always upload a new version of a Vue website or can you update individual pages

[@TylerPotts]

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.

[@araputrevor5103]

@@TylerPotts thanks, could you please make a video about it

[@MTFights]

great video

[@faridehgorji2586]

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

[@nicholasbazzoni7084]

Does this have within it an example of a parent component being passed to a child? just wondering

[@mcfahr3655]

Works good, tnx

[@ahmadevangelista9578]

hi may I ask what extension do you use for intelisense.

[@anish9053]

github copilot (freemium)

[@shanksjoyboy2550]

Unexpected side effect in computed function on computed

[@yooru7942]

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 ?

[@nwachukwuexcel]

I'm thinking Github Copilot but, it could just be another Eslint extension for Vue

[@Drenwickification]

@@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

[@mr.gegenpress7750]

'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

[@ludame]

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?

[@waqarmujeeb4122]

SynthWave '84

[@sysy4205]

Thank you so much. I like your code colors! What is name of the theme?

[@eugenevorobyev]

I think it's "SynthWave '84" from extended list of themes

[@angelo1716]

@@eugenevorobyev i use the same one and it took me a while to realize we both use it lol

[@andresmontenegro1384]

It's "Synthwave Refined" !

[@hafiizhaalbanna7477]

watch(name, (newVal) => { localStorage.setItem('name', newVal) }) name deprecated. also when i see application is not store the name.

[@athallahyoga6986]

can you put it on firebase?

[@FroYouShorts-np5cm]

Please take more time in explanation , It would be great

[@ahmetcanyontem5590]

Is the local storage permanent? I mean if u close the app and reopen it, do the data load or are they gone?

[@szabolcsjobbagy30]

It is stored in your browser, it will remain there until you delete it manually or by an app.

[@9diin]

It's good🎉

[@zafariqbal92]

Liked the video and Smashed the Subscribe button!!!

[@nwachukwuexcel]

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

[@piyushpatil6874]

Wonderfullllllll :)

[@TylerPotts]

Glad you like it!

[@vuchke]

is anyone else having his todos sorted from oldest first to newest or just me ?

[@nicholasbazzoni7084]

const todos_asc = computed(() => todos.value.sort((a,b) =>{ return b.createdAt - a.createdAt }))

[@remixowlz]

or you can just use .shift instead of .push

[@sohei1_]

Where is your styles?

[@04444722]

in the css file.

[@kolja235]

Dude, you're WAY too fast, I had to stop the video like 100 times. But thanks for it, though. It taught me something.

[@Drenwickification]

It helps to watch on .75 playback speed haha

[@nabukodosonorogi9025]

M8 it's a gr8 video, super cool, but just to notice you are toooo fast , try little slower next time XDDDD

[@ragnarlothbrok367]

You jump up and down too much, my shit is not working and idk why

[@santiagotv6095]

bookmarked

[@taymookrumpli3991]

is it for begginers? really? xd this is for intermediate users omg....

[@zafariqbal92]

todos_asc = Todos Asynchronous 😂

[@atlantic_love]

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.

[@hasansolak23]

Great tutorial! Thanks a lot.