About VueTODO List App

Getting familiarized with Vue.js by converting a TODO App originally created in React.js.

Live Demo

Project demo has been deployed to Netlify at https://vue-todo-app8.netlify.app.

Screenshot

Vue.js Concepts Used In Project

• Component based architecture (e.g. TodoList, TodoListItem, TodoListHero, TodoListModal)
• Data properties (e.g. totalTasks passed down to TodoListHero component)
• Computed properties: to derive new values based on existing data properties (e.g. completedTasks and totalTasks computed from the tasks array)
• Methods (e.g. handleShow, handleFilterChange)
• Event handling (e.g. @click, @keydown)
• Lifecycle hooks (using watch to track changes to showModal to update the todo task input and duedate on edit action)
• Conditional rendering with the v-if directive
• Use of the vuedraggable.next component for drag-and-drop sorting

VueTodo App - Todo List

• Drag and drop reordering of todo with vue.draggable.next
• Autofocus text input
• Handle Enter key
• Deploy project online (e.g Netlify)
• <script setup> version for all components vs <script>

Recommended IDE Setup

VSCode + Volar (and disable Vetur).

Customize configuration

See Vite Configuration Reference.

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Compile and Minify for Production

npm run build