In this recipe, we learned how to create a user registration page with Vuetify and Vue-CLI. To create this page, we first needed to create the project using the Vue-CLI tool and then add the Vuetify plugin to it, so that the framework was available to be used.
Then, we created the top-bar component, which holds the application title and the menu button toggle. To use the menu, we created the drawer-menu component to hold the navigation items. Finally, we created the layout component to hold together the top-bar and drawer-menu components and added a <slot> component to place the page content.
For the user registration form page, we created three cards that hold the input forms, which were bound to the variables on the component. Some of the inputs on the form are attached to a set of validation rules that checks for required fields and email validation.
Finally, the user registration form is checked to see whether it's valid before sending the data to the server...