Vue Examples

Tic-tac-toe ​

Also known as Noughts and Crosses, or Xs and Os.

Players take it in turns to place their symbol in one of the grid squares. A player wins if they form a straight line of 3 in a row. Horizontal, vertical and diagonal lines all count. The game ends with no winner if all squares are filled without forming a line.

Example ​

Live Example
X to play

View it on the SFC Playground

Features Used ​

Your implementation doesn't need to use the same Vue features as the example above, but to give you some idea of the knowledge you might need to attempt this:

  • The example above is written using a single component.
  • It uses a Single-File Component with <script setup>.
  • Reactivity comes from reactive(), ref() and computed().
  • The template uses:
    • Text interpolation, {{ ... }}.
    • v-if/v-else conditional rendering.
    • v-for for looping.
    • v-on/@ for handling events.
    • Class bindings with :class.