Welcome to the Vue.js Todo App! This simple and intuitive application allows you to manage your tasks effectively. It's designed with a clean and user-friendly interface, powered by Vue.js and styled with Tailwind CSS.
-
To create a new todo, locate the input field at the top of the page.
-
Enter the task you want to add to your list.
-
Click the "Create" button, and your new task will be added to the list.
-
To edit a todo, click on the "Edit" icon (pencil) located next to the task you want to modify.
-
The task text will become editable. Edit the task text as needed.
-
Click the "Check" icon to save your changes.
-
To mark a todo as complete, simply check the checkbox next to the task.
-
The task text will be crossed out to indicate that it's completed.
-
To delete a todo, click on the "Trash" icon located next to the task you want to remove.
-
The task will be promptly deleted from your list.
- New Feature: We've added a drag-and-drop capability to enhance your task management experience. You can now easily rearrange tasks by clicking and dragging them to your desired position within the list.
-
If you manage to complete all your tasks, you'll see a celebratory message at the bottom of the page.
-
If you currently have no tasks, a message will encourage you to add a new one.
Enjoy using this Vue.js Todo App to keep your tasks organized and efficiently manage your to-do list. It's a straightforward and user-friendly tool to help you stay on top of your tasks. Happy task management!
VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).
See Vite Configuration Reference.
npm installnpm run devnpm run build