Building a Tic-Tac-Toe Game with Vue 3 and Claude Sonnet 4.5

I recently experimented with Claude Sonnet 4.5, Anthropic's latest AI model, to build a fully functional Tic-Tac-Toe game. The result? A polished web app built with Vue 3, TypeScript, and Tailwind CSS that includes features like move history and time travel.

Here's how I did it and what I learned along the way.

🎯 The Goal

I wanted to create a Tic-Tac-Toe game that went beyond the basics:

• ✅ Interactive 3x3 grid
• ✅ Player turn tracking (X and O)
• ✅ Win detection with visual highlighting
• ✅ Move history with time travel (jump to any previous move)
• ✅ Clean, responsive UI

🎮 How the Game Works

The application is a classic Tic-Tac-Toe game where two players take turns placing X's and O's on a 3x3 grid. The first player to align three of their symbols horizontally, vertically, or diagonally wins the game.

What makes this implementation special is the time travel feature - inspired by React's official tutorial but implemented in Vue 3. Every move is recorded in a history list displayed on the side of the board. Players can click on any previous move to "travel back in time" and see the board's state at that moment. From there, they can continue playing, which creates a new timeline by discarding all moves that occurred after that point.

This feature demonstrates several advanced concepts:

• Immutability: Each move creates a new board state rather than mutating the existing one
• History management: The app maintains a complete record of all game states
• Derived state: The current player is calculated based on the number of moves, not stored separately
• Temporal navigation: Users can freely move between different points in the game's timeline

The game also handles edge cases elegantly: if all cells are filled without a winner, it declares a draw. When a player wins, the winning cells are highlighted in green, providing clear visual feedback.

🛠️ Tech Stack

• Vue 3 with Composition API
• TypeScript for type safety
• Tailwind CSS for styling
• Vite as the build tool

🤖 Working with Claude Sonnet 4.5

What impressed me most about Sonnet 4.5 was its ability to understand the full context of what I wanted and structure the code elegantly. I didn't need to micro-manage every detail - I simply described the features, and the AI delivered clean, maintainable code.

Key Implementation Highlights

1. State Management with Vue Refs

The game state is managed using Vue's reactive refs:

const board = ref<Cell[]>(Array(9).fill(null))
const currentPlayer = ref<'X' | 'O'>('X')
const movesHistory = ref<Move[]>([{ board: Array(9).fill(null), index: null }])
const currentMove = ref(0)

2. Winner Detection Algorithm

The win detection is straightforward and efficient:

const winningCombinations = [
  [0, 1, 2], [3, 4, 5], [6, 7, 8], // rows
  [0, 3, 6], [1, 4, 7], [2, 5, 8], // columns
  [0, 4, 8], [2, 4, 6]             // diagonals
]

const checkWinner = (boardState: Cell[]): number[] | null => {
  for (const combo of winningCombinations) {
    const [a, b, c] = combo
    if (boardState[a] && boardState[a] === boardState[b] && boardState[a] === boardState[c]) {
      return combo
    }
  }
  return null
}

3. Time Travel Feature

One of the coolest features is the ability to jump back to any previous move:

const jumpTo = (moveIndex: number) => {
  const move = movesHistory.value[moveIndex]
  board.value = [...move.board]
  currentMove.value = moveIndex

  const moveCount = move.board.filter(cell => cell !== null).length
  currentPlayer.value = moveCount % 2 === 0 ? 'X' : 'O'
}

This allows players to review the game move-by-move or undo mistakes.

4. Smart Move Recording

When a player makes a move, the game records it in history. If they've jumped back in time and make a new move, it intelligently discards the "future" moves:

const play = (index: number) => {
  if (gameOver.value || board.value[index]) return

  // Discard future history if we're in the past
  movesHistory.value = movesHistory.value.slice(0, currentMove.value + 1)

  const newBoard = [...board.value]
  newBoard[index] = currentPlayer.value
  board.value = newBoard

  movesHistory.value.push({ board: [...newBoard], index })
  currentMove.value = movesHistory.value.length - 1

  currentPlayer.value = currentPlayer.value === 'X' ? 'O' : 'X'
}

🎨 UI/UX Touches

The game includes several polish features:

• Visual feedback: Winning cells are highlighted with a green background
• Accessibility: Proper ARIA labels for screen readers
• Responsive design: Works seamlessly on mobile and desktop
• Smooth transitions: Hover effects and focus states for better interactivity

💡 What I Learned

1. AI-Assisted Development is Powerful

Claude Sonnet 4.5 didn't just generate code - it structured the entire application with best practices in mind. The code uses:

• TypeScript interfaces for type safety
• Computed properties for derived state
• JSDoc comments for documentation
• Proper separation of concerns

2. Iteration is Key

While the AI produced great initial code, I refined the features through conversation. The AI adapted quickly to feedback and suggestions.

3. Modern Vue is Clean

The Composition API with <script setup> makes Vue 3 code incredibly readable and maintainable. Combined with TypeScript, it's a joy to work with.

🚀 Try It Yourself

The complete source code structure:

sonnet_4.5/
├── src/
│   ├── App.vue          # Main game component
│   └── main.ts          # App entry point
├── package.json
├── vite.config.ts
└── tailwind.config.js

To run the project:

npm install
npm run dev

🎓 Takeaways

Building with AI assistance doesn't mean you don't learn - quite the opposite. By focusing on what you want instead of how to implement every detail, you can:

• Explore more features in less time
• Learn from well-structured code
• Focus on the creative aspects of development

Claude Sonnet 4.5 proved to be an excellent coding partner, producing production-quality code that I'd be happy to ship.