Let's code the <template> section of the single file component:
- Open the App.vue file in the src folder.
- In the <template> section, remove everything inside the div#app.
- Create an h1 HTML element with the counter variable inside of it.
- Create a button with an event listener on the @click directive that calls the increment function, and have + as a label:
<button @click="increment">+</button>
- Create a button with an event listener on the @click directive that calls the decrement function, and - as a label:
<button @click="decrement">-</button>
To run the server and see your component, you need to open Terminal (macOS or Linux) or Command Prompt/PowerShell (Windows) and execute the following command:
> npm run serve
Here is your component rendered and running:
