Refactoring Todo MVC in Vue 3 and Vite
Today, we are going to take a look at our Vue Your Todos app to refactor our app with Vue 3's Composition API so that it's easier to build new features for and maintain in the future. We'll start by refactoring our app into its different components and then look into how the functionality should be distributed amongst these components.
Let's organize our spaghetti code!
=======================================
📚 Resources
=======================================
🌐 Live Site: https://vue-your-todos.netlify.app/
👨💻 Repo: https://github.com/bencodezen/peek-a-...
=======================================
📑 Bookmarks
=======================================
0:00 - Intro
0:18 - Main Hero Component
6:30 - TaskListNav Component
14:00 - TabNavItem Component
21:09 - Integrating TabNavItem with TabNav
23:30 - Refactoring Data from App.vue
33:37 - Challenges with CSS Modules*
38:45 - Outro
For the solution on how I ended up integrating CSS modules in Composition API, see my "Why I Love CSS Modules in Vue" video: • Why I Love CSS Modules in Vue.js
=======================================
📱 Social Media
=======================================
Website - https://www.bencodezen.io
Twitter - / bencodezen
GitHub - https://www.github.com/bencodezen
TikTok - / bencodezen