Hello artisan!
In this blog we are going build a reusable component which we can reuse it in Create or Edit user or anywhere if there is requirement of the same code and the same functionality.
The reuse of the component may help us to avoid writing the same code and functionality multiple times which may leads to less code and make our app faster.
In this blog we are going to create a user component which can be used to create as well as edit the User.
So let’s start coding
Create the component UserComponent.vue in components directory and add the below code.
<template>
<div class="max-w-lg mx-5 text-left">
<form @submit.prevent="$emit('submit-form', form)">
<div class="mb-6">
<label for="name" class="text-sm font-medium text-gray-900 block mb-2"
>Name</label
>
<input
type="text"
id="name"
class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
placeholder="Name"
v-model="form.name"
required=""
/>
</div>
<div class="mb-6">
<label for="email" class="text-sm font-medium text-gray-900 block mb-2"
>Your email</label
>
<input
type="email"
id="email"
class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
placeholder="Email"
v-model="form.email"
required=""
/>
</div>
<div class="mb-6">
<label
for="address"
class="text-sm font-medium text-gray-900 block mb-2"
>Address</label
>
<input
type="text"
id="address"
class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
placeholder="Address"
v-model="form.address"
required=""
/>
</div>
<div class="mb-6">
<label for="text" class="text-sm font-medium text-gray-900 block mb-2"
>Mobile no</label
>
<input
type="text"
id="mobile_no"
class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
placeholder="Mobile no"
v-model="form.mobile"
required=""
/>
</div>
<button
type="submit"
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center"
>
Submit
</button>
</form>
</div>
</template>
<script>
export default {
name: "UserComponent",
props: {
user: Object,
},
data() {
return {
form: {
name: this.user ? this.user.name : "",
address: this.user ? this.user.address : "",
email: this.user ? this.user.email : "",
mobile: this.user ? this.user.mobile : "",
},
};
},
};
</script>
Now create a component CreateUser.vue in components directory. After creating the create-user component import the UserComponent and add it in template as given in below code
<template>
<div class="px-5">
<!-- success msg component -->
<Success :msg="msg" v-show="success" />
<UserComponent @submit-form="saveUser" />
</div>
</template>
<script>
import UserComponent from "./UserComponent";
import Success from "./Success";
export default {
name: "CreateUser",
components: {
UserComponent,
Success,
},
data() {
return {
success: false,
msg: "",
};
},
methods: {
saveUser() {
this.success = true;
this.msg = "User added";
console.log("User info saved");
},
},
};
</script>
Same we will do for Edit User for that let’s create EditUser component and add the below code to it.
<template>
<div class="px-5">
<!-- success msg component -->
<Success :msg="msg" v-show="success" />
<!-- edit user which has user data as prop -->
<UserComponent :user="user" @submit-form="updateUser" />
</div>
</template>
<script>
import UserComponent from "./UserComponent";
import Success from "./Success";
export default {
name: "EditUser",
components: {
UserComponent,
Success,
},
props: {
user: Object,
},
data() {
return {
success: false,
msg: "",
};
},
methods: {
updateUser() {
this.success = true;
this.msg = "User Updated";
console.log("User info updated");
},
},
};
</script>
Create a one more component to display the success message after creating/editing user. So let’s create a Success component in components directory.
<template>
<div
class="w-full mx-4 text-green-300 p-2 mx-auto mb-6 bg-green-600 border border-green-700 rounded"
>
{{ msg }}
</div>
</template>
<script>
export default {
name: "Success",
props: {
msg: {
type: String,
},
},
};
</script>
Now we are on the final step, add the CreateUser and EditUser component in App.vue file.
<template>
<div id="app">
<h4>Save information of User</h4>
<CreateUser />
<br />
<h4>Update User Information</h4>
<EditUser :user="user" />
</div>
</template>
<script>
import CreateUser from "./components/CreateUser";
import EditUser from "./components/EditUser";
export default {
name: "App",
components: {
CreateUser,
EditUser,
},
data() {
return {
user: {
name: "Alex",
address: "info building",
email: "alex@xyz.com",
mobile: "1122334456",
},
};
},
};
</script>
<style>
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
Here we go we have successfully re-used the component.
You can also check the result below.
❤️ 🦄 Happy Reading.. 🦄 ❤️
Top comments (0)