the error will be reflected in the frontend

book-racker/src/components/Register.vue

@@ -6,6 +6,8 @@
     <br>
     <input type="password" name="password" v-model="password" placeholder="password"/>
     <br>
+    <div class="error" v-html ="error"/>
+    <br>
     <button @click="register">Register</button>
   </div>
 </template>
@@ -17,18 +19,23 @@ export default {
   data () {
     return {
       email:'',
-      password:''
-      
+      password:'',
+      error: null
     }
   },
  
   methods:{
       
       async register(){
+        try{
            await AuthentiacationService.register({
           email: this.email,
           password:this.password
         })
+        }catch(error) {
+          this.error = error.response.data.error
+
+        }
          
     }
   }
@@ -38,4 +45,8 @@ export default {
 
 <style scoped>
 
+.error{
+  color:red;
+}
+
 </style>