How to do it...

To start our component, we can use the Vue project with Vue-CLI, as we did in the 'Creating Your first project with Vue CLI' recipe in Chapter 2, Introducing TypeScript and the Vue Ecosystem, or we can start a new one.

To start a new project, open Terminal (macOS or Linux) or the Command Prompt/PowerShell (Windows) and execute the following command:

> vue create visual-component

The CLI will ask some questions that will help with the creation of the project. You can use the arrow keys to navigate, the Enter key to continue, and the spacebar to select an option. Choose the default option:

? Please pick a preset: (Use arrow keys)
❯ default (babel, eslint) 
  Manually select features ‌

Now, let's follow these steps and create a visual template component:

1. Let's create a new file called MaterialCardBox.vue in the src/components folder.
2. In this file, we will start with the template of our component. We need to create the box for the card...