This project is based on Shaun Pelling tutorial on Vue Animations.
Please note that the master branch does not implement the animations, although Shaun's tutorial is all about Vue transitions. This repository has another branch dedicated to implementing transitions.
This app is a TODO app. It enables adding and removing TODOS from a list. The top of the main screen shows three links. At the center of the page, there is the data input, where the user writes down their TODO. The bottom of the screen shows the TODO list. Newest TODOS are listed first.
Adding a new TODO is as simple as typing the TODO in the input text and hitting Enter
.
This will update the original TODO list by adding the new TODO on top of the stack.
One can remove a TODO from the list by clicking on the TODO.
When all TODOS are removed, the message Woohoo, nothing left todo! is shown.
This is a simple page with textual info. It is used in Shaun's tutorial to showcase transitions between pages.
This is also a simple page. The icons are strategically used for demonstating animations in the original project - used by Shaun in his tutorial.
Apart from the Home.vue
, the other two Views consists of pure text. The Home.vue
groups two components: Todos.vue
that is responsible for managing all TODO operations, and Toast.vue
that is a mensage used when the user hits Enter
in a blank input box.
The original project has no additional dependency other than the Vue Router.