Skip to content
Solitaire made in Vue
Vue JavaScript CSS HTML Shell
Branch: master
Clone or download
Latest commit ccadc75 Oct 3, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
.firebase awesome-vue Apr 16, 2019
public awesome-vue Apr 16, 2019
readme_assets Final v1 Apr 5, 2019
src Sound bug fixed Apr 21, 2019
.firebaserc read me Mar 31, 2019
.gitignore added menu Apr 3, 2019
LICENSE Create LICENSE Apr 7, 2019 Update Oct 3, 2019
babel.config.js init Mar 27, 2019 deploy Apr 18, 2019
package-lock.json Hands Dissapear on completion Mar 31, 2019
package.json Update package.json Apr 7, 2019


Mentioned in Awesome Vue.js

Live Demo

Contributions are Welcome



Solitaire implemented by scratch on vue.js. It contains 3 types of solitaire namely spider(which was made famous by microsoft back when I was a kid) ,spider 4 suit and klondike. I've learned web development myself without any course or coaching so don't expect too much from the source code xD.

This project is inspired by AadumKhor Go check out his flutter implementation of the same Here .

How to play

Drag and Drop [Chrome,Opera]:-

  • Drag the card or the card pile you want to move.
  • Drop the dragged card pile on the target and if the move is legal card will move
  • Note:- Drag and Drop doesn't work for properly for firefox due to their lack of support to html Drag and drop API - .

Click edition [Mobile,Firefox,Chrome,Safari,Opera]-

  • Click on the card or card pile you want to move .The pile turns to blue.
  • Click on the destination card and if the move is legal the cards will stack below the target.

About the project.

Drag and Drop

  • Drag and drop is implemented with native html5 drag and drop api with @drag, @dragend, @dragenter eventlisteners on the Card.vue component.
  • Libraries like Vue.draggable were not used as i had to write most of the drag and drop logic according to the solitaire game type and I also had to MOVE the stack of cards.
  • Ghost image in drag is removed except the whole stack of card moves with cursor change.


  • Each and every card is 100% css except for the SVG of the suit in the center ,which is made by illustrator tool.

3 mode menu

Choose from 3 variants of solitaire form the main menu



Spider 4 Suit

Spider 1 Suit

Project setup

npm install
npm run serve

Future scope

  • Add winning animation.

Support on Beerpay

Hey dude! Help me out for a couple of 🍻!

Beerpay Beerpay

You can’t perform that action at this time.