In this recipe, we learned how to create a user registration page with Ant-Design and Vue-CLI. To create this page, we first needed to create a project using Vue-CLI and add the Ant-Design of Vue plugin to it, so that the framework was available to be used.
Then, we created the top-bar component, which holds the navigation breadcrumbs. For user navigation, we created a custom Drawer component that has an inline toggle button at the bottom. Finally, we created the layout component to hold together both the components and we added a <slot> component to place the page content.
Finally, we created the user registration form page, with three cards that hold the input forms that are bound to the variables on the component.
Here is a screenshot of the final project up and running:
