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

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/TylerPottsDev/yt-v...
// JOIN THE DISCORD SERVER!
/ discord
// BECOME A MEMBER TO UNLOCK MORE CONTENT!
kzbin.infojoin
// MY GEAR FOR CODING AND KZbin
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.com/store/apps/de...
// DO THESE SIMPLE STEPS
LIKE, SUBSCRIBE & SHARE

[@edkinge1531]

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

[@jackwang3093]

Thanks for the tutorial mate! Awesome content!

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

[@jonyparker2279]

Thanks. This is really helpful.

[@casaderemador]

Kick ass tutorial! Congrats!

[@yugeyuge8008]

Thanks for the concise and educational video.

[@nato.musica]

Awesome videos, thank you very much!

[@haamidshamim9858]

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

[@hasansolak23]

Great tutorial! Thanks a lot.

[@elian-dev]

Awesome video, thanks!

[@newtonkimathi5141]

Excellent work keep up and share more knowledge

[@tomtakumi]

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

[@shimakara]

Thank you ,I learned a lot😀😀

[@2310karyn]

very nice one, thanks for sharing !

[@robimuhammad95]

thank you! easy to follow

[@TylerPotts]

Glad it helped!

[@nadetdevfullstack7041]

Excellent Tyler !

[@TylerPotts]

Happy you enjoyed it

[@AbdullahKhan-js2oz]

❤ well it helped a lot

[@writingcodes...1422]

An other perfect Vue App Thanks!

[@TylerPotts]

Thank you!

[@mcfahr3655]

Works good, tnx

[@dicodidiraja]

wordke flawlessly, thanks

[@Yakuzanis]

Thank you so much !

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

[@d-landjs]

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

[@user-iq4uz1ly6q]

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

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

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

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

[@ai-bloggers]

Thank you very much 🎉

[@TylerPotts]

You're welcome 😊

[@user-ig8xk9jk3b]

hello sir whats the recommended syntax highlighting for vue

[@shiratorr]

What theme are you using?

[@danielkovacs3664]

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

[@jaloliddinumariy2025]

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

[@rohitkf8474]

Soooo soothing to listen to your voice bruh 😂

[@abletoneverything3913]

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

[@thiagosaife1429]

Pretty cool. I would just add another verification inside addTodo function = if (inputContent.value === "" || inputContent.value.trim() === "" || inputCategory.value === null) return

[@MTFights]

great video

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

[@nicholasbazzoni7084]

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

[@jrv660]

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

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

[@paulaneesh7]

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

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

[@9diin]

It's good🎉

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

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

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

[@hafiizhaalbanna7477]

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

[@rasen-shuriken]

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

[@ManuMarea]

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

[@TylerPotts]

Yes, absolutely

[@user-rb1fc2mm2m]

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!

[@athallahyoga6986]

can you put it on firebase?

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

[@piyushpatil6874]

Wonderfullllllll :)

[@TylerPotts]

Glad you like it!

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

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

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

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

[@seungyoonjang4205]

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" !

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

[@faridehgorji2586]

Sorry for the typing errors.😮

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

[@zafariqbal92]

Liked the video and Smashed the Subscribe button!!!

[@remixowlz]

or you can just use .shift instead of .push

[@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 }))

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

[@santiagotv6095]

bookmarked

[@zafariqbal92]

todos_asc = Todos Asynchronous 😂

[@taymookrumpli3991]

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

[@ragnarlothbrok367]

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

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