Single Elemination Tournament Bracket In Vue

Install & Download:

# NPM
$ npm install vue-tournament-bracket --save

Description:

A simple plan Vue.js library to render a single-elimination tournament bracket on the app.

Basic usage:

1. Install and import the tournament bracket component.

import Bracket from "vue-tournament-bracket";

2. Insert a tournament bracket component into the template.

<template>
  <bracket :rounds="rounds">
    <template slot="player" slot-scope="{{ player }}">
      {{ player.name }}
    </template>
  </bracket>
<template>

3. Create your own rounds as follows:

const rounds = [
      //Semi finals
      {
          games: [
              {
                  player1: { id: "1", name: "Competitor 1", winner: false },
                  player2: { id: "4", name: "Competitor 4", winner: true },
              },
              {
                  player1: { id: "5", name: "Competitor 5", winner: false },
                  player2: { id: "8", name: "Competitor 8", winner: true },
              }
          ]
      },
      //Final
      {
          games: [
              {
                  player1: { id: "4", name: "Competitor 4", winner: false },
                  player2: { id: "8", name: "Competitor 8", winner: true },
              }
          ]
      }
];

4. Register and enable the tournament bracket.

export default {
  components: {
    Bracket
  },
  data() {
    return {
      rounds: rounds
    }
  }
}

Preview:

Changelog:

v3.0.0 (02/08/2024)

• Updated dependencies.

v2.1.4 (03/26/2021)

• Updated dependencies.

v2.1.3 (05/09/2021)

• Updated dependencies.

v2.1.2 (09/13/2020)

• Dependencies update.

v2.1.1 (07/20/2020)

• Prevent “undefined” warnings if model is not fully build yet
• Dependencies update

v2.1.0 (06/30/2020)

• Added flatTree props that allows to render bracket in different way that is helpful to generate double elimination loser bracket.