How To Use Custom Filter In Vue.js

Step 1: Components

<template>
  <div class="filter-area pt-100 pb-75">
    <div class="container">
      <ul class="filter-menu">
        <li
          class="filter"
          :class="{ active: itemFilterKey == 'all' }"
          v-on:click="itemFilterKey = 'all'"
        >
          All
        </li>
        <li
          class="filter"
          :class="{ active: itemFilterKey == 'mobile' }"
          v-on:click="itemFilterKey = 'mobile'"
        >
          Mobile App
        </li>
        <li
          class="filter"
          :class="{ active: itemFilterKey == 'development' }"
          v-on:click="itemFilterKey = 'development'"
        >
          Development
        </li>
        <li
          class="filter"
          :class="{ active: itemFilterKey == 'web' }"
          v-on:click="itemFilterKey = 'web'"
        >
          Web Design
        </li>
        <li
          class="filter"
          :class="{ active: itemFilterKey == 'product' }"
          v-on:click="itemFilterKey = 'product'"
        >
          Product Design
        </li>
      </ul>
      <div class="row justify-content-center">
        <div
          class="col-lg-4 col-md-6"
          v-for="item in itemFilter"
          :key="item.id"
        >
          <div
            class="single-filter-item"
            data-aos="fade-up"
            data-aos-delay="50"
            data-aos-duration="500"
            data-aos-once="true"
          >
            <div class="filter-image">
              <img :src="item.image" alt="image" />
            </div>
            <div class="filter-content">
              <h3>
                {{ item.title }}
              </h3>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

Step 2: Script

<script>
export default {
  data: function () {
    return {
      itemFilterKey: "all",
      items: [
        {
          id: 1,
          image:
            "https://res.cloudinary.com/do2wma1dv/image/upload/v1677737384/projects-1_g9ppv0.jpg",
          title: "3D Animation",
          key: "mobile",
        },
        {
          id: 2,
          image:
            "https://res.cloudinary.com/do2wma1dv/image/upload/v1677737382/projects-2_m7u38j.jpg",
          title: "Online Banking Software",
          key: "development",
        },
        {
          id: 3,
          image:
            "https://res.cloudinary.com/do2wma1dv/image/upload/v1677737382/projects-3_tlvjs9.jpg",
          title: "Cashier Software",
          key: "product",
        },
        {
          id: 4,
          image:
            "https://res.cloudinary.com/do2wma1dv/image/upload/v1677737382/projects-4_jxtkvk.jpg",
          title: "Analytics Software",
          key: "development",
        },
        {
          id: 5,
          image:
            "https://res.cloudinary.com/do2wma1dv/image/upload/v1677737382/projects-5_zao6wq.jpg",
          title: "Messaging App",
          key: "web",
        },
        {
          id: 6,
          image:
            "https://res.cloudinary.com/do2wma1dv/image/upload/v1677737383/projects-6_nqjve2.jpg",
          title: "Banking Software",
          key: "mobile",
        },
      ],
    };
  },
  computed: {
    itemFilter() {
      return this[this.itemFilterKey];
    },
    all() {
      return this.items;
    },
    mobile() {
      return this.items.filter((item) => item.key == "mobile");
    },
    development() {
      return this.items.filter((item) => item.key == "development");
    },
    web() {
      return this.items.filter((item) => item.key == "web");
    },
    product() {
      return this.items.filter((item) => item.key == "product");
    },
  },
};
</script>

Step 3: SCSS

<style lang="scss" scoped>
.filter-area {
  background: #14042c
}
.filter-menu {
  list-style-type: none;
  padding: 0;
  text-align: center;
  margin-bottom: 45px;

  li {
    display: inline-block;
    padding: 10px 25px;
    background-color: #fff;
    color: #14042c;
    box-shadow: 0px 15px 35px rgba(0, 0, 0, 0.1);
    border-radius: 15px;
    font-size: 16px;
    font-weight: 600;
    margin-right: 15px;
    transition: 0.6s;
    cursor: pointer;

    &:last-child {
      margin-right: 0;
    }
    &:hover {
      background: radial-gradient(
        circle,
        #a66bff,
        #c666ef,
        #dd62df,
        #ee61cf,
        #fb64bf
      );
      color: #fff;
    }
  }
  .filter {
    &.active {
      background: radial-gradient(
        circle,
        #a66bff,
        #c666ef,
        #dd62df,
        #ee61cf,
        #fb64bf
      );
      color: #fff;
    }
  }
}
.single-filter-item {
  margin-bottom: 25px;
  position: relative;

  &::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: 0.6s;
    visibility: hidden;
    background: radial-gradient(
      circle,
      #a66bff,
      #c666ef,
      #dd62df,
      #ee61cf,
      #fb64bf
    );
    border-radius: 20px;
    z-index: 1;
  }
  .filter-image {
    overflow: hidden;
    border-radius: 20px;

    a {
      display: block;

      img {
        border-radius: 20px;
        transition: 0.6s;
      }
    }
  }
  .filter-content {
    position: absolute;
    left: 0;
    bottom: 0;
    opacity: 0;
    padding: 30px;
    padding-bottom: 0;
    visibility: hidden;
    transition: 0.6s;
    z-index: 9;

    h3 {
      font-size: 22px;
      font-weight: bold;
      margin-bottom: 15px;
      color: #fff;

      &:hover {
        color: #14042c;
      }
    }
  }
  &:hover {
    &::before {
      margin: 10px;
      opacity: 1;
      visibility: visible;
    }
    .filter-image {
      a {
        img {
          transform: scale(1.1);
          filter: blur(2px);
        }
      }
    }
    .filter-content {
      opacity: 1;
      visibility: visible;
      padding-bottom: 30px;
    }
  }
}
</style>