No video :(

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

Подписаться 58 тыс.

Просмотров 104 тыс.

50% 1

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 RU-vid
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

Опубликовано:

28 авг 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 108

@zalodias123 2 года назад

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

@TylerPotts 2 года назад

You are welcome!

@nangseakheng2976 2 года назад

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

@edkinge1531 Год назад

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

@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 10 месяцев назад

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

@user-iq4uz1ly6q Год назад

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

@waleedcodes1422 2 года назад

An other perfect Vue App Thanks!

@TylerPotts 2 года назад

Thank you!

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

@jackwang3093 Год назад

Thanks for the tutorial mate! Awesome content!

@haamidshamim9858 10 месяцев назад

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

@yugeyuge8008 6 месяцев назад

Thanks for the concise and educational video.

@user-rb1fc2mm2m 6 месяцев назад

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!

@nadetdevfullstack7041 2 года назад

Excellent Tyler !

@TylerPotts 2 года назад

Happy you enjoyed it

@nato.musica 2 месяца назад

Awesome videos, thank you very much!

@jonyparker2279 Год назад

Thanks. This is really helpful.

@AbdullahKhan-js2oz 2 года назад

❤ well it helped a lot

@robimuhammad95 Год назад

thank you! easy to follow

@TylerPotts Год назад

Glad it helped!

@ai-bloggers 3 месяца назад

Thank you very much 🎉

@TylerPotts 3 месяца назад

You're welcome 😊

@d-landjs Год назад

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

@casaderemador Год назад

Kick ass tutorial! Congrats!

@elian-dev 10 месяцев назад

Awesome video, thanks!

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

@hasansolak23 Год назад

Great tutorial! Thanks a lot.

@newtonkimathi5141 2 года назад

Excellent work keep up and share more knowledge

@rohitkf8474 2 года назад

Soooo soothing to listen to your voice bruh 😂

@tomtakumi 2 года назад

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

@thiagosaife1429 Год назад

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

@shimakara Год назад

Thank you ,I learned a lot😀😀

@TheanIDE Месяц назад

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

@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 10 месяцев назад

SynthWave '84

@dicodidiraja 10 месяцев назад

wordke flawlessly, thanks

@2310karyn Год назад

very nice one, thanks for sharing !

@jaloliddinumariy2025 Год назад

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

@paulaneesh7 11 месяцев назад

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

@jrv660 2 года назад

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

@Yakuzanis 8 месяцев назад

Thank you so much !

@mcfahr3655 Год назад

Works good, tnx

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

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

@NeverDieAgl 2 года назад

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

@ManuMarea 2 года назад

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

@TylerPotts 2 года назад

Yes, absolutely

@FitHealthyandInShape 9 месяцев назад

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?

@matthewtang5638 2 года назад

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

@TylerPotts 2 года назад

Hey Matthew, I've done an updated version of todo app with local storage here: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-6eFwtaZf6zc.html

@faridehgorji2586 10 месяцев назад

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

@MTFights Год назад

great video

@rasen-shuriken 7 месяцев назад

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

@danielkovacs3664 7 месяцев назад

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

@Pages_Perfected 11 месяцев назад

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.

@shanksjoyboy2550 2 года назад

Unexpected side effect in computed function on computed

@yooru7942 2 года назад

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 2 года назад

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

@shiratorr 10 месяцев назад

What theme are you using?

@nwachukwuexcel 2 года назад

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

@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

@FroYouShorts-np5cm 11 месяцев назад

Please take more time in explanation , It would be great

@user-ig8xk9jk3b Год назад

hello sir whats the recommended syntax highlighting for vue

@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

@nicholasbazzoni7084 2 года назад

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

@abletoneverything3913 Год назад

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

@hafiizhaalbanna7477 2 года назад

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

@9diin 2 года назад

It's good🎉

@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

@faridehgorji2586 10 месяцев назад

Sorry for the typing errors.😮