Create a Tic Tac Toe with Vue 3 and JavaScript

Vue 3 is the latest version of the easy to use Vue JavaScript framework that lets us create front end apps.

In this article, we’ll look at how to create a tic tac toe game with Vue 3 and JavaScript.

Create the Project

We can create the Vue project with Vue CLI.

To install it, we run:

npm install -g @vue/cli

with NPM or:

yarn global add @vue/cli

with Yarn.

Then we run:

vue create tic-tac-toe

and select all the default options to create the project.

Create the Tic Tac Toe

To create the tic tac toe game, we write:

<template>
  <div v-if="xWins || oWins">
    <div v-if="xWins">x wins</div>
    <div v-if="oWins">o wins</div>
    <button @click="restart">restart</button>
  </div>
  <form v-else>
    <div v-for="i in 3" :key="i">
      <span v-for="j in 3" :key="j">
        <input v-model.trim="board[i - 1][j - 1]" style="width: 20px" />
      </span>
    </div>
  </form>
</template>

<script>
const board = [[], [], []];

export default {
  name: "App",
  data() {
    return {
      board,
    };
  },
  computed: {
    xWins() {
      return this.isWinner("x");
    },
    oWins() {
      return this.isWinner("o");
    },
  },
  methods: {
    restart() {
      this.board = [[], [], []];
    },
    isWinner(player) {
      const { board } = this;
      return (
        (board[0][0] === player &&
          board[0][1] === player &&
          board[0][2] === player) ||
        (board[1][0] === player &&
          board[1][1] === player &&
          board[1][2] === player) ||
        (board[2][0] === player &&
          board[2][1] === player &&
          board[2][2] === player) ||
        (board[0][0] === player &&
          board[1][0] === player &&
          board[2][0] === player) ||
        (board[0][1] === player &&
          board[1][1] === player &&
          board[2][1] === player) ||
        (board[0][2] === player &&
          board[1][2] === player &&
          board[2][2] === player) ||
        (board[0][0] === player &&
          board[1][1] === player &&
          board[2][2] === player) ||
        (board[0][2] === player &&
          board[1][1] === player &&
          board[2][0] === player)
      );
    },
  },
};
</script>

In the template, we have a div that displays the outcome of the game if there is one.

If either x or o wins, we display who wins.

Also, we add a restart button so that the game can be restarted.

Otherwise, we display the game board.

We use v-for to render 3 inputs.

And we render inputs to let players enter the value.

We bind the inputted value to the board nested array entry with v-model .

The trim modifier lets us trim the leading and trailing whitespace of the inputted value.

In the script tag, we have the board array, which we use as the initial value of the board reactive property.

Then we have the xWins and oWins computed properties to determine who wins.

The winner is determined by the isWinner method, which checks if any player has their marker on the board either diagonally, vertically, or horizontally.

Conclusion

We can create a tic tac toe game easily with Vue 3 and JavaScript.