Solitaire Card Game in VueJS: Free Source Code

This article will show you how to install a VueJS Solitaire Card Game. This web application uses VueJS, a JavaScript framework used for front-end development.

What sets this project apart is its use of a JavaScript framework for a better user interface. Also, Vue can work with other frameworks and tools like CSS, TypeScript, and others.

You can run this Vuejs game on your computer with or without internet connection. Also, you can take new ideas from this solitaire card game to incorporate with other systems.

What is a Web Application (Web App)

A web application is a program that run on a web server. In comparison to desktop apps where they run inside an operating system, Web apps run using web browsers and other web technologies to perform tasks.

What is Vue.JS

Vue.js or Vue is a JavaScript framework for front-end developers. It is used to create single-page applications with stunning UI. Many companies use Vue on their websites. Some of them are Xiaomi, Alibaba, and GitLab.

Solitaire Card Game in VueJS: How to Install the Project

Installing this web app is easy! Just follow the guide and you will get it done in a breeze!.

Vue.js Components You Need to Build

A Solitaire game in Vue.js breaks naturally into 4 main components. Each handles one piece of the game state:

• Card.vue — displays a single card (suit, rank, face-up or face-down). Stateless.
• Pile.vue — a stack of cards (used for the tableau columns, stock, waste, and foundations).
• GameBoard.vue — the parent component that owns the entire game state and renders all piles.
• Controls.vue — new game, undo, hint, score display.

Sample: A Simple Card Component (Vue 3)

<!-- Card.vue -->
<template>
  <div :class="['card', faceUp ? 'face-up' : 'face-down', color]">
    <template v-if="faceUp">
      <span class="rank">{{ rank }}</span>
      <span class="suit">{{ suitSymbol }}</span>
    </template>
  </div>
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps({
  rank:   { type: String, required: true },  // A,2,3,4,5,6,7,8,9,10,J,Q,K
  suit:   { type: String, required: true },  // hearts, diamonds, clubs, spades
  faceUp: { type: Boolean, default: true }
});

const SUITS = {
  hearts:   '♥',
  diamonds: '♦',
  clubs:    '♣',
  spades:   '♠'
};

const suitSymbol = computed(() => SUITS[props.suit]);
const color = computed(() =>
  (props.suit === 'hearts' || props.suit === 'diamonds') ? 'red' : 'black'
);
</script>

<style scoped>
.card {
  width: 70px;
  height: 100px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid #1F3A5F;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}
.face-down {
  background: linear-gradient(135deg, #1F3A5F, #C9A961);
}
.red { color: #D32F2F; }
.black { color: #2c3e50; }
</style>

Game State and Deck Generation

// useGameState.js — reactive game state via Composition API
import { ref } from 'vue';

const SUITS = ['hearts','diamonds','clubs','spades'];
const RANKS = ['A','2','3','4','5','6','7','8','9','10','J','Q','K'];

function buildDeck() {
    const deck = [];
    for (const suit of SUITS) {
        for (const rank of RANKS) {
            deck.push({ suit, rank, id: `${rank}-${suit}` });
        }
    }
    return deck;
}

function shuffle(deck) {
    // Fisher-Yates shuffle
    for (let i = deck.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [deck[i], deck[j]] = [deck[j], deck[i]];
    }
    return deck;
}

export function useGame() {
    const tableau = ref([[],[],[],[],[],[],[]]);  // 7 columns
    const foundations = ref([[],[],[],[]]);       // 4 piles
    const stock = ref([]);
    const waste = ref([]);

    function deal() {
        const deck = shuffle(buildDeck());
        for (let col = 0; col < 7; col++) {
            for (let row = 0; row <= col; row++) {
                const card = deck.pop();
                card.faceUp = (row === col);  // top card face up
                tableau.value[col].push(card);
            }
        }
        stock.value = deck;  // remaining 24 cards
    }

    return { tableau, foundations, stock, waste, deal };
}

The Fisher-Yates shuffle is the standard algorithm for randomizing a deck. Without it, your “random” shuffle has subtle bias depending on the algorithm you use. Always use Fisher-Yates.

Game Rules to Implement

• Tableau placement: cards stack in DESCENDING order, alternating color. (Red 7 → Black 6 → Red 5.)
• Foundation placement: cards stack in ASCENDING order, same suit. (Ace, 2, 3… up to King.)
• Win condition: all 52 cards on the four foundation piles.
• Stock-to-waste: click the stock pile to flip 1 (or 3) cards to the waste pile. Cards in waste can be moved to tableau or foundation.
• Empty tableau column: only a King can be placed in an empty tableau column.

Capstone Enhancements to Add

• Drag-and-drop with HTML5 native API instead of click-to-select. More natural interaction.
• Undo/redo by keeping a history stack of game-state snapshots.
• Animations using Vue’s <Transition> wrapper for moving cards.
• Multiple solitaire variants — Klondike (classic), Spider, FreeCell, Pyramid. Demonstrate that the architecture is flexible.
• Score persistence in localStorage so the user’s best time/score survives a page refresh.

Conclusion

So there you have it! Solitaire Card Game in VueJS. Vue.JS is versatile and can be used with other frameworks. These projects are good in developing your skills in programming web applications

ABOUT PROJECT	PROJECT DETAILS
Project Name :	Solitaire Card Game in VueJS.
Project Platform :	Vue.JS
Programming Language Used:	php,javascript,html,css
Developer Name :	itsourcecode.com
IDE Tool (Recommended):	Visual Studio 2019
Project Type :	Web Application
Database:	MySQL

For suggestions, please comment below.

Source Code Download

Click the button below to download the project.

Frequently Asked Questions

What is Vue.js and why use it for a card game?

Vue.js is a progressive JavaScript framework for building user interfaces. Its reactivity model (where the UI auto-updates when data changes) is perfect for a card game where game state changes drive visual updates. Vue’s component model also breaks complex UI into manageable pieces — you can build a Card component, a Pile component, etc., each handling one concern.

Should I use Vue 2 or Vue 3 for a Solitaire project in 2026?

Vue 3. Vue 2 reached end-of-life on December 31, 2023. All new tutorials assume Vue 3 with the Composition API and <script setup> syntax. If you find Vue 2 code online, the patterns mostly translate but the syntax is different. Stick with Vue 3 for any BSIT capstone in 2026.

How do I shuffle a deck of cards in JavaScript?

Use the Fisher-Yates algorithm. Loop from the end of the array to the start, picking a random index between 0 and the current position, and swap. The 4-line implementation is in the deck generation code above. Avoid using array.sort(() => Math.random() - 0.5) — it produces biased results because of how sort algorithms work internally.

Can I make this a multiplayer Solitaire game?

Solitaire is single-player by design, but you can add competitive elements: race-against-time mode, daily challenge (same shuffle seed for all players), or leaderboards. For true real-time multiplayer card games, you would need WebSockets (e.g., Socket.IO) and a backend like Node.js or Laravel WebSockets — significantly more complex than a single-player Solitaire.

How do I add card animations in Vue.js?

Use Vue’s built-in <Transition> component for entering/leaving animations and <TransitionGroup> for list animations (like cards moving between piles). For CSS-only animations, set transition properties on your card class. For more complex sequences, the GSAP library integrates well with Vue but adds bundle size.

Related Projects

• JavaScript Backend Frameworks (Vue + Node)
• Free JavaScript Projects with Source Code
• JavaScript Tutorial Series
• TypeScript Tutorial Series
• Best Final Year Projects for IT and CSE Students