Using the base project, create a new project for this recipe called transactiongroup and open the project folder. Now, follow these steps:
- Inside the project folder, open Terminal (macOS or Linux) or a Command Prompt/PowerShell (Windows) and execute the following command to install the Animate.css framework:
> npm install [email protected]
- Open the main.js file in the src folder and import the Animate.css framework:
import Vue from 'vue';
import App from './App.vue';
import 'animate.css';
- Open the App.vue file in the src folder. In the <script> section of the single file component, on the data singleton, return a property called count with a value of 0:
data: () => ({
count: 0,
}),
- In the <template> section of the single file component, remove everything inside the div#app HTML element. Then, as a child of the div#app HTML element, create a TransitionGroup component with an attribute called tag defined as "ul"...