To start our component, create your Vue project with Vue-CLI, as we did in the recipe 'Creating Your first project with Vue CLI' in Chapter 2, Introducing TypeScript and the Vue Ecosystem, or use the project from the 'Passing data to your component and validating the data' recipe.
Now, follow these instructions to create a Vue functional component:
- Create a new file called MaterialButton.vue in the src/components folder.
- In this component, we need to validate whether the prop we'll receive is a valid color. To do this, install in the project the is-color module. You'll need to open Terminal (macOS or Linux) or the Command Prompt/PowerShell (Windows) and execute the following command:
> npm install --save is-color
- In the <script> part of our component, we need to create the props object that the functional component will receive. As a functional component is just a render function with no state – it's stateless –...