How to create reusable component using Vue Js
Tags: javascript, vue, programming, beginners
Published: 2021-11-12 12:37:43

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.

```javascript
<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

```javascript

<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.

```javascript

<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.

```javascript
<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.

```javascript
<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.

{% codesandbox reusable-component-in-vue-js-for-create-and-edit-user-w9z0q %}

:heart: :unicorn: Happy Reading.. :unicorn: :heart: