📝 7 most commonly used Vue 3 UI components 😎

terawuthTh — Wed, 20 Sep 2023 09:00:40 +0000

Introduction:

Due to my changing roles and responsibilities at the company I worked for, I, who is a backend developer, picked up Vue.js late last year. As I dig deeper, I find Vue.js quite interesting. It does not have a high learning curve like Angular and more lightweight and flexible than React. Vue.js is definitely a powerful JavaScript framework for building user interfaces. In order to create visually appealing and interactive user interfaces, it is important to incorporate UI components.

In this article, I will cover 7 most commonly used UI components that I often come across for work. I will also touch on their purposes, implementation examples and real-life use cases.

Importance of UI Components

UI components play an important role in Vue.js development. By breaking down complex interfaces into modular, reusable components, developers can create scalable and efficient code that is easier to maintain and troubleshoot. Additionally, incorporating UI components can also improve user experience and interface consistency, as users will have a familiar experience across different pages or applications.

7 Most Commonly Used UI Components for Vue.js

1. Button Component

Description: Buttons enable users to interact with the application. It is almost impossible to not see buttons on a website. It may be one of the simplest components but its purpose is not. It is a call-to-action for the websites. So think carefully how to make it standout, how to handle different states and how it can be used to validate certain actions.

Real-life example: Submit button for a registration form, "Add to Cart" button on an e-commerce site.

Here is a simple example:

<template>
    <button>{{props.title || 'Add To Cart'}}</button>
</template>
<script setup>
  const props = defineProps(['title']);
</script>
<style>
button {
  color: #4fc08d;
}
button {
  background: none;
  border: solid 1px;
  border-radius: 1em;
  font: inherit;
  padding: 0.65em 2em;
}
</style>

Code example: https://codepen.io/terawuthth/pen/poqRJvZ

2. Form Component

Description: Forms are used to collect user input in web applications and can be customized for different input types (text, email, password, etc.). It is hard not to come across a form on a website. Elements like validations, steps or guidelines go a long way to make the experience of filling in a form better.

Real-life example: User input forms for registration, contact, or login.

<template>
  <div class="form-main">
    <form>
      <div class="form-item">
        <label>First Name</label>
        <input type="text" name="first_name" v-model="firstName" />
      </div>
      <div class="form-item">
        <label>Last Name</label>
        <input type="text" name="last_name" v-model="lastName" />
      </div>
      <div class="form-item">
        <Button @click="onSave" title="Save" />
      </div>
    </form>
  </div>
</template>
<script setup>
import { ref } from "vue";
import Button from "https://codepen.io/terawuthth/pen/poqRJvZ.js";
const firstName = ref("");
const lastName = ref("");
const onSave = () => alert("Save !!");
</script>
<style>
form {
  display: flex;
  flex-direction: column;
}
.form-item input {
  margin-left: 20px
}
.form-item {
  margin-top: 20px;
}
</style>

Code example: https://codepen.io/terawuthth/pen/KKbzLzK

3.Card Component

Description: Cards are used for organizing and displaying information in a visually appealing manner. Nowadays, card components are very common, especially on social media websites. Although card components present information in a beautiful and clean way, one has to be careful not to put too much data on a card.

Real-life example: News article cards on a website, social media profile cards.

<template>
  <div class="card">
    <div class="img-product">
      <img :src="product.image" alt="Product" />
    </div>
    <div class="detail">
      <div class="title">
        <h3>
          <a :href="product.link">{{ product.name }}</a>
        </h3>
      </div>
      <div class="tag">
        <a v-for="tag in tags" :href="tag.link">
          <span>{{ tag.name }}</span>
        </a>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive } from "vue";
const tags = ref([
  {
    link: "#",
    name: "notebook"
  },
  {
    link: "#",
    name: "windows"
  }
]);
const product = reactive({
  name: "Domino",
  image:
    "https://picsum.photos/id/2/250/200",
  link: "#"
});
</script>
<style>
.card {
  width: 250px;
  height: 300px;
  border: 1px solid #dedfdf;
  border-radius: 10px;
}
.card:hover {
  border: 2px solid #adaeae;
  box-shadow: 2px 2px #adaeae;
}
.card .img-product {
  height: 60%;
  margin: 0;
}
.card .img-product img {
  height: 200px;
  width: 100%;
}
.detail {
  height: 40%;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
}
.tag a {
  font-size: 12px;
  color: black;
  background-color: #dedfdf;
  padding: 0 8px 0 8px;
  border-radius: 20px;
  text-decoration: none;
}
.tag a:not(:first-child) {
  margin-left: 8px;
}
.detail a {
  color: black;
  text-decoration: none;
}
.detail .tag a:hover {
  color: #fff;
  background-color: #fc6969;
}
.detail .title h3:hover {
  color: #fc6969;
}
</style>

Code example: https://codepen.io/terawuthth/pen/XWogWqW

4.Navigation Component

Description: Navigation allows users to navigate to different sections or pages within an application. In most websites, there is at least 1 menu. Menus are very important for guiding users but too many menus or incorrect menu groupings can lead to confusion.

Real-life example: Navigation bar for a company website, menu for a restaurant website.

<template>
  <div class="nav">
    <a
      v-for="menu in menuList"
      :class="{ active: menu.name === activeMenu }"
      :href="menu.link"
    >
      {{ menu.name }}
    </a>
  </div>
</template>
<script setup>
import { ref } from "vue";
const activeMenu = ref("menu1");
const menuList = ref([
  {
    link: "#",
    name: "menu1"
  },
  {
    link: "#",
    name: "menu2"
  },
  {
    link: "#",
    name: "menu3"
  }
]);
</script>
<style>
body {
  margin: 0;
  padding: 0;
}
.nav {
  overflow: hidden;
  background-color: #333;
}

.nav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.nav a:hover {
  background-color: #ddd;
  color: black;
}

.nav a.active {
  background-color: #04aa6d;
  color: white;
}
</style>

Code example: https://codepen.io/terawuthth/pen/bGOwJvo

5.Modal Component

Description: Modal is used to display content in a popup window on top of the main content. It is good for showing meaningful information without going to a new page. Although it allows users to concentrate on a specific place, it can get annoying. An example is an advertisement modal.

Real-life example: Login or registration pop-ups, confirmation messages.

<template>
  <div>
    <Button @click="showModal" title="Open Modal" />
    <!-- The Modal -->
    <div id="myModal" class="modal" :style="{ display: modalDisplay }">
      <div class="modal-content">
        <span class="close" @click="closeModal">&times;</span>
        <p>{{ content }}</p>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
import Button from "https://codepen.io/terawuthth/pen/poqRJvZ.js";
const modalDisplay = ref("none");
const content = ref("Some text in the Modal.. !!");
const showModal = () => {
  modalDisplay.value = "block";
};
const closeModal = () => (modalDisplay.value = "none");
</script>
<style>
.modal {
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
}
.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}
.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
</style>

Code example: https://codepen.io/terawuthth/pen/gOZRRdo

6.Alert Component

Description: Alerts provides feedback and notifying users about important information or events in an application. Alerts can be very useful way to feedback users without annoying them. But we should consider when to use an alert that disappears after a while or when it needs to be closed by a user.

Real-life example: Success or error messages for payments or transactions, site maintenance notifications.

<template>
  <div class="alert" :style="{ display: alertDisplay }">
    <span
      class="closebtn"
      @click="closeAlert"
      onclick="this.parentElement.style.display='none';"
    >
      &times;
    </span>
    This is an alert box.
  </div>
</template>
<script setup>
import { ref } from "vue";
const isAlert = ref(true);
const alertDisplay = ref("block");
const closeAlert = () => (alertDisplay.value = "none");
</script>
<style>
.alert {
  padding: 20px;
  background-color: #f44336;
  color: white;
  margin-bottom: 15px;
}
.closebtn {
  margin-left: 15px;
  color: white;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}
.closebtn:hover {
  color: black;
}
</style>

Code example: https://codepen.io/terawuthth/pen/WNLOyOo

7.Avatar Component

Description: Avatars are icons or images representing users in an application. They make the user accounts more personal and easy to identify by users. However, not all systems need user accounts to have an icon or an image. If users do not upload them, we should provide a default image or use first letters of their names to provide a better user experience.

Real-life example: User profiles on social media websites or chat apps.

<template>
  <div class="avatar">
    <img :src="imgPath" id="img-avatar" alt="Avatar" />
  </div>
</template>
<script setup>
import { ref } from "vue";
const imgPath = ref(
  "https://picsum.photos/id/866/50/50"
);
</script>
<style scoped>
.avatar {
  vertical-align: middle;
  width: 50px;
  height: 50px;
}
#img-avatar {
  border-radius: 50%;
}
</style>

Code example: https://codepen.io/terawuthth/pen/PoXJeqK

Note: You can find the codes for the collection of 7 UI components here.

Benefits and Considerations

The benefits of using these UI components in Vue.js development include:

Increased code reusability and maintainability
Improved interface consistency and user experience
Faster development times with pre-built components

However, it is important to also consider some limitations or drawbacks, such as potential performance issues due to a large number of components on a page, or the need for customization beyond what pre-built components offer. As such, it is important to strike a balance between using pre-built components and customized code.

My take coming from backend development

In my case, I was coming from a backend development using Node.js (based on Javascript). I did not have to learn a new language and a new framework at the same time.

Also, Vue.js documentation encourages newcomers to develop using functionally programming principles such as Composition API. Similarly, backend developers are encouraged to use this concept whenever possible, making the transition to frontend development easier.

Conclusion

Vue.js is a powerful tool for developing engaging user interfaces, and incorporating UI components can take your projects to the next level. These are just my personal takes on 7 most commonly used UI components which developers can create scalable, efficient, and visually appealing interfaces that users will enjoy.

As a back-end developer who still new to Vue.js, I still have much to learn. Hope that by sharing my experience and journey, I can encourage anyone who is interested in learning and expanding your understanding of UI component development in Vue.js.

Can you please help me?

If you find this article useful, could you consider starring Berryjam's Github repo ⭐ ⭐ ⭐

Berryjam is a UI components analyzer for Vue 3 & Nuxt. It would really mean a lot in helping me create more content. Thank you! 🤟

DEV Community: terawuthTh