Vue.jsでトーナメント表を実装する「vue-tournament-bracket」

vue-tournament-bracketとは

vue-tournament-bracketは、トーナメント表を実装することができるVue.js用コンポーネントライブラリです。

slotを使って、独自のタグを設定する事が可能です。
3位決定戦のような表記ができます。

環境

この記事は、以下の管理人の検証環境にて記事にしています。

検証ソースはこちら

ライブラリの取得

ライブラリを取得するには、npm, CDNのどれか一つを使用します。

npm install vue-tournament-bracket

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-tournament-bracket.umd.min.js"></script>

gitリポジトリは以下から取得できます。

導入手順

管理人が行った、動作確認サンプルを実装するために、以下の手順でソースコードを導入していきます。
このサンプルでは、トーナメント表を実装します。

step
1ライブラリの呼び出し

まずライブラリを呼び出す為に、以下の２通りのケースで呼び出します。

ES6等で実装する場合

import Bracket from "vue-tournament-bracket";

UMDで実装する場合

const Bracket = window['vue-tournament-bracket'];

step
2JavaScriptを設定

const rounds = [
  {
    games: [
      {
        id: 1,
        next: 3,
        player1: { id: "1", name: "Competitor 1", winner: false },
        player2: { id: "4", name: "Competitor 4", winner: true },
      },
      {
        id: 2,
        next: 3,
        player1: { id: "5", name: "Competitor 5", winner: false },
        player2: { id: "8", name: "Competitor 8", winner: true },
      }
    ]
  },
  {
    games: [
      {
        player1: { id: "4", name: "Competitor 4", winner: true },
        player2: { id: "8", name: "Competitor 8", winner: false },
      }
    ]
  }
];

new Vue({
  el: '#app',
  components: {
    bracket: Bracket
  },
  data: {
    rounds: rounds
  },
});

step
3テンプレートを準備

<bracket> コンポーネントを設置し、roundsに上記で設定したroundsを設定します。

サンプルはケバブケースで記載しています。

<div id="app">
  <bracket :rounds="rounds">
    <template #player="{ player }">
      <span>{{ player.name }}</span>
    </template>
  </bracket>
</div>

サンプル

今回のソースを実際に触って確認できるようにデモを用意しました。

See the Pen Vue.jsでトーナメント表を実装する「vue-tournament-bracket」 by カバの樹 (@kabanoki) on CodePen.dark

さいごに

トーナメント表を実装することができるコンポーネントライブラリでした。

今日はこの辺でー