実務で使った Vuetify おすすめコンポーネント 3 選!!!

はじめに

• Vuetify Meetup #2 の LT 発表内容です
• 社内イベント支援プラットフォームの開発で使った中でおすすめのコンポーネントを 3 つ紹介していきます!!!

---

v-chip

---

---

v-chip の良いところ

• https://vuetifyjs.com/en/components/chips
• ラベル、タグといった Web でよく使われる概念を表現しやすい。
• 一覧から選択、インクリメンタルサーチ、新規作成、をバッチリサポート。

---

上限と新規追加の制御

  watch: {
    value(target: Object[]): void {
      // 上限設定
      if (target.length > 5) {
        this.$nextTick(() => target.pop());
        return;
      }

      const added = target[target.length - 1];
      // 新規追加の判断と制御
      if (typeof added === 'string') {
        if (!this.allowCreateLabel) {
          this.$nextTick(() => target.pop());
          return;
        }
      }
    }
  }

---

v-timeline

---

---

v-timeline の良いところ

• https://vuetifyjs.com/en/components/timelines
• LINE のようなやり取り方法を再現できた
• オプションが豊富でいろいろなものに適用できそう

---

自分自身かどうかで左右を分けるを分ける

<v-timeline>
  <v-timeline-item
    v-for="comment in event.comments"
    :key="comment.commentId"
    :left="!isMe(comment)"
    :right="isMe(comment)"
  >
    <template v-slot:icon>
      <v-icon color="white">person</v-icon>
    </template>
    <v-card class="elevation-2">
      <!-- /// -->
    </v-card>
  </v-timeline-item>
</v-timeline>

---

v-calendar

---

---

v-calendar の良いところ

• https://vuetifyjs.com/en/components/calendars
• そもそも他フレームワークではほぼ未実装
• 日付をまたがった表現など対応方法も豊富

---

日毎に画像を並べて表示

<v-calendar ref="calendar" type="month">
  <template v-slot:day="{ present, date }">
    <template v-if="dateEventMap.has(date)">
      <template v-for="(event, i) in dateEventMap.get(date)">
        <nuxt-link
          :key="i"
          tag="img"
          :src="event.eventImageUrl"
          :width="`${100 / dateEventMap.get(date).length}%`"
          height="72"
          :to="`/events/${event.eventId}`"
        >
        </nuxt-link>
      </template>
    </template>
  </template>
</v-calendar>

---

まとめ

• 紹介した以外にも素晴らしいコンポーネントがたくさんあります
• ドキュメントも充実しているのでドンドン使っていきましょう!
• https://vuetifyjs.com