Building the UI for Category API: Adding a Category

Explore how to build an admin panel UI in Vue.js by adding a category feature. Learn to configure router paths, create forms, integrate Axios for HTTP requests, and use SweetAlert for user-friendly alerts within your e-commerce app front end.

We'll cover the following...

Router
Style the application
The AddCategory.vue file
Update router paths
Preview
Axios integration
Sweet alert integration
API call
Final code

   ¨( @ ¸A¸A¸A¸A¸A¸A¸A3¸A3¸A¸A¸A¸A¸A±¸A±¸A¸A¸A¸A¸AZ¸A÷¸A÷¸AZ¸A¸A¸A¸A¸AÉ¸Aÿ¸Aÿ¸AÉ¸A¸A¸A¸A¸Az¸Aþ¸Aÿ¸Aÿ¸Aþ¸Az¸A¸A¸A¸A¸A.¸Aß¸Aÿ¸Aÿ¸Aÿ¸Aÿ¸Aß¸A.¸A¸A¸A¸A¸A¸Aÿ¸Aÿ¸Aÿ¸Aÿ¸Aÿ¸Aÿ¸A¸A¸A¸A¸A¸AH¸Að¸Aÿ¸Aÿ¸Aÿ¸Aÿ¸Aÿ¸Aÿ¸Að¸AH¸A¸A¸A¸A¸A¸¸Aÿ¸Aÿ¸Aÿ¸Aÿ¸Aÿ¸Aÿ¸Aÿ¸Aÿ¸A¸¸A¸A¸A¸A¸Af¸Aú¸Aÿ¸Aÿ¸Aÿ¸Aÿ¸Aÿ¸Aÿ¸Aÿ¸Aÿ¸Aú¸Af¸A¸A¸A¸A ¸AÒ¸Aÿ¸Aÿ¸Aÿ¸Aÿ¹Aÿ¹Aÿ¸Aÿ¸Aÿ¸Aÿ¸Aÿ¸AÒ¸A ¸A¸A¸A¸A¸Aÿ¸Aÿ¸Aÿ¸Aÿ¹Aÿ|¤?ÿ|¤?ÿ¹Aÿ¸Aÿ¸Aÿ¸Aÿ¸Aÿ¸A¸A¸A¸A¸A¸A7¸Aæ¸Aÿ¸Aÿ¸Aÿ¸Aÿ´Aÿjl9ÿjl9ÿ´Aÿ¸Aÿ¸Aÿ¸Aÿ¸Aÿ¸Aæ¸A7¸A¸A¸A¸A	¸A¦¸Aÿ¸Aÿ¸Aÿ¸Aÿ¹Aÿw=ÿ_L5ÿ_L5ÿw=ÿ¹Aÿ¸Aÿ¸Aÿ¸Aÿ¸Aÿ¸A¦¸A	¸A¸A¸A¸AR¸Aô¸Aÿ¸Aÿ¸Aÿ¹Aÿ®@ÿfa8ÿ^H5ÿ^H5ÿfa8ÿ®@ÿ¹Aÿ¸Aÿ¸Aÿ¸Aÿ¸Aô¸AR¸A¸A¸A¸A¸AÂ¸Aÿ¸Aÿ¸Aÿ¸Aÿ¹Aÿr<ÿ^I5ÿ^I5ÿ^I5ÿ^I5ÿr<ÿ¹Aÿ¸Aÿ¸Aÿ¸Aÿ¸Aÿ¸AÂ¸A¸A¸A¸A¸Aq¸Aü¸Aÿ¸Aÿ¸Aÿ¹Aÿ}¦?ÿcW7ÿ^H5ÿ^I5ÿ^I5ÿ^H5ÿcW7ÿ}¦?ÿ¹Aÿ¸Aÿ¸Aÿ¸Aÿ¸Aü¸Aq¸A¸A¸A¸A(¸AÚ¸Aÿ¸Aÿ¸Aÿ¸Aÿ·Aÿmv:ÿ^H5ÿ^I5ÿ^I5ÿ^I5ÿ^I5ÿ^H5ÿmv:ÿ·Aÿ¸Aÿ¸Aÿ¸Aÿ¸Aÿ¸AÚ¸A(¸A¸A¸A¸A¸Aÿ¸Aÿ¸Aÿ¸Aÿ¹Aÿy>ÿ`P6ÿ^H5ÿ^I5ÿ^I5ÿ^I5ÿ^I5ÿ^H5ÿ`P6ÿy>ÿ¹Aÿ¸Aÿ¸Aÿ¸Aÿ¸Aÿ¸A¸A¸A¸A¸A¸A@¸Aì¸Aÿ¸Aÿ¸Aÿ¸Aÿ²@ÿii9ÿ]G5ÿ^I5ÿ^I5ÿ^I5ÿ^I5ÿ^I5ÿ^I5ÿ]G5ÿii9ÿ²@ÿ¸Aÿ¸Aÿ¸Aÿ¸Aÿ¸Aì¸A@¸A¸A¸A¸A
¸A±¸Aÿ¸Aÿ¸Aÿ¸Aÿ¹Aÿu=ÿ_K5ÿ^I5ÿ^I5ÿ^I5ÿ^I5ÿ^I5ÿ^I5ÿ^I5ÿ^I5ÿ_K5ÿu=ÿ¹Aÿ¸Aÿ¸Aÿ¸Aÿ¸Aÿ¸A±¸A
¸A¸A¸A¸A]¸Aø¸Aÿ¸Aÿ¸Aÿ¹Aÿ¬@ÿe]7ÿ^H5ÿ^I5ÿ^I5ÿ^I5ÿ^J5å^J5å^I5ÿ^I5ÿ^I5ÿ^H5ÿe]7ÿ¬@ÿ¹Aÿ¸Aÿ¸Aÿ¸Aÿ¸Aø¸A]¸A¸A¸A¸A¸AÌ¸Aÿ¸Aÿ¸Aÿ¸Aÿ¸Aÿp;ÿ^I5ÿ^I5ÿ^I5ÿ^I5ÿ^I5ü_L5n_L5n^I5ü^I5ÿ^I5ÿ^I5ÿ^I5ÿp;ÿ¸Aÿ¸Aÿ¸Aÿ¸Aÿ¸Aÿ¸AÌ¸A¸A¸A¸A¸A}¸Aþ¸Aÿ¸Aÿ¸Aÿ¹Aÿ|¢?ÿbT6ÿ^H5ÿ^I5ÿ^I5ÿ^I5ÿ_J5ÁaP6aP6_J5Á^I5ÿ^I5ÿ^I5ÿ^H5ÿbT6ÿ|¢?ÿ¹Aÿ¸Aÿ¸Aÿ¸Aÿ¸Aþ¸A}¸A¸A¸A¸A/¸Aá¸Aÿ¸Aÿ¸Aÿ¸AÿµAÿlq9ÿ^H5ÿ^I5ÿ^I5ÿ^I5ÿ^I5ó_L5P^H5^H5_L5P^I5ó^I5ÿ^I5ÿ^I5ÿ^H5ÿlq9ÿµAÿ¸Aÿ¸Aÿ¸Aÿ¸Aÿ¸Aá¸A/¸A¸A¸A¸Aÿ¸Aÿ¸Aÿ¸AÿºAÿx=ÿ`N6ÿ^I5ÿ^I5ÿ^I5ÿ^I5ÿ_K5¤bT7aQ6aQ6bT7_K5¤^I5ÿ^I5ÿ^I5ÿ^I5ÿ`N6ÿx=ÿºAÿ¸Aÿ¸Aÿ¸Aÿ¸Aÿ¸A¸A¸AW¸Að¸Aÿ¸Aÿ¸Aÿ¹Aÿ¯@ÿgd8ÿ^H5ÿ^I5ÿ^I5ÿ^I5ÿ^J5å`M65_K5jf9jf9_K5`M65^J5å^I5ÿ^I5ÿ^I5ÿ^H5ÿgd8ÿ¯@ÿ¹Aÿ¸Aÿ¸Aÿ¸Aÿ¸Að¸AW¸A¸AÈ¸AÆ¸AÆ¸AÆºAÆv=Æ_K5Æ^I5Æ^I5Æ^I5Æ^I5É_K5uha9bS7bS7ha9_K5u^I5É^I5Æ^I5Æ^I5Æ_K5Æv=ÆºAÆ¸AÆ¸AÆ¸AÆ¸AÈ¸A¸A¸A
¸A
¸A
¸A
¹A
lr:
\D4
^I5
^I5
^I5
^I5
`M6^H5^H5`M6^I5
^I5
^I5
^I5
\D4
lr9
¹A
¸A
¸A
¸A
¸A
¸Aÿÿÿÿÿÿÿÿÿþÿÿü?ÿÿü?ÿÿøÿÿøÿÿðÿÿàÿÿàÿÿÀÿÿÀÿÿÿÿÿÿÿþþü?ü?øððààÀÀÀÀàÿÿÿÿ

Setup code

1.Introduction and Project Setup

2.Building Admin Panel: Backend

3.Building an Admin Panel: Frontend

4.Displaying the Products and Categories For Customers

5.Sign-Up and Login Backend

6.Sign-Up and Login Frontend

7.Wishlist and Cart Feature: Backend

8.Wishlist and Cart Feature: Frontend

9.Stripe Integration

10.Order History: Backend

11.Order History: Frontend

12.Conclusion

Building the UI for Category API: Adding a Category

Router