Below is what our front-end code looks like:

   ¨( @ ¸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

   ¨( @ ¸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ÿÿÿÿÿÿÿÿÿþÿÿü?ÿÿü?ÿÿøÿÿøÿÿðÿÿàÿÿàÿÿÀÿÿÀÿÿÿÿÿÿÿþþü?ü?øððààÀÀÀÀàÿÿÿÿ

After adding router

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <title>Demo E-Commerce App</title>
  <!-- Google fonts -->
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Courgette&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;1,300;1,400&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap" rel="stylesheet">
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <!-- Bootstrap Icons -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<noscript>
  <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<script type="module" src="https://unpkg.com/ionicons@5.2.3/dist/ionicons/ionicons.esm.js"></script>
<!-- Bootstrap JS Scripts -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!-- built files will be auto injected -->
</body>
</html>

HTML

 <template>
   <div class="container">
     <div class="row">
       <div class="col-12 text-center">
         <h3 class="pt-3">Add new Category</h3>
       </div>
     </div>
     <div class="row">
       <div class="col-3"></div>
       <div class="col-md-6 px-5 px-md-0">
        <form>
          <div class="form-group">
            <label>Category Name</label>
            <input type="text" class="form-control" v-model="categoryName" required>
          </div>
          <div class="form-group">
            <label>Description</label>
            <input type="text" class="form-control" v-model="description" required>
          </div>
          <div class="form-group">
            <label>ImageURL</label>
            <input type="url" class="form-control" v-model="imageURL" required>
          </div>
          <button type="button" class="btn btn-primary">Submit</button>
        </form>
       </div>
       <div class="col-3"></div>
     </div>
  </div>
</template>
<script>
export default {
  data(){
    return {
      categoryName : null,
      description : null,
      imageURL : null,
    }
  },
  props : [],
  methods : {
    
  }
}
</script>
<style scoped>
h4 {
  font-family: 'Roboto', sans-serif;
  color: #484848;
  font-weight: 700;
}
</style>

Javascript (babel-node)

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import AddCategory from "../views/Category/AddCategory";
const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: "/about",
    name: "About",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/About.vue"),
  },
  {
    path: "/admin/category/add",
    name: "AddCategory",
    component: AddCategory,
  },
];
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})
export default router

Axios integration

Axios is a popular, promise-based HTTP client that supports an easy-to-use API, and can be used in both the browser and Node.

Run the npm install --save axios command .
Add the line in the main.js, window.axios = require('axios').

Sweet alert integration

Sweet alert integration is commonly referred to as a beautiful replacement for JavaScript’s alert method. It does the same job as an alert.

Install the package using the command, npm install --save sweetalert.

Also, we’ll add the following lines:

import swal from 'sweetalert';
window.Swal = swal

We can now access axios and sweetalert in the entire application.

API call

First, we’ll trigger the addCategory function by clicking the submit button. We’ll do this by adding the code, @click="addCategory", into the submit button.

<button type="button" @click="addCategory">Submit</button>

We’ll define a function in the methods section inside the script tag.

HTML

<script>
var axios =  require('axios')
import swal from 'sweetalert';
export default {
  data(){
    return {
      categoryName : null,
      description : null,
      imageURL : null,
    }
  },
  methods : {
    async addCategory() {
      const newCategory = {
        categoryName : this.categoryName,
        description : this.description,
        imageUrl : this.imageURL,
      };
      const baseURL =  "https://limitless-lake-55070.herokuapp.com/";
      await axios({
        method: 'post',
        url: baseURL+"category/create",
        data : JSON.stringify(newCategory),
        headers: {
          'Content-Type': 'application/json'
        }
      })
      .then(() => {
        swal({
          text: "Category Added Successfully!",
          icon: "success",
          closeOnClickOutside: false,
        });
      })
      .catch(err => console.log(err));
    }
  },
  mounted(){
  }
}
</script>

   ¨( @ ¸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ÿÿÿÿÿÿÿÿÿþÿÿü?ÿÿü?ÿÿøÿÿøÿÿðÿÿàÿÿàÿÿÀÿÿÀÿÿÿÿÿÿÿþþü?ü?øððààÀÀÀÀàÿÿÿÿ

Final 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

Style the application

The `AddCategory.vue` file

Update router paths

Preview

Axios integration

Sweet alert integration

API call

Final code

Building the UI for Category API: Adding a Category

Router

Style the application

The AddCategory.vue file

Update router paths

Preview

Axios integration

Sweet alert integration

API call

Final code

The `AddCategory.vue` file