Book Image

Vue.js 2 Web Development Projects

Book Image

Vue.js 2 Web Development Projects


Overview of this book

Do you want to make your web application amazingly responsive? Are you unhappy with your app's performance and looking forward to trying out ways to make your app more powerful? Then Vue.js, a framework for building user interfaces, is a great choice, and this book is the ideal way to put it through its paces. This book's project-based approach will get you to build six stunning applications from scratch and gain valuable insights in Vue.js 2.5. You'll start by learning the basics of Vue.js and create your first web app using directives along with rich and attractive user experiences. You will learn about animations and interactivity by creating a browser-based game. Using the available tools and preprocessor, you will learn how to create multi-page apps with plugins. You will create highly efficient and performant functional components for your app. Next, you will create your own online store and optimize it. Finally, you will integrate Vue.js with the real-time Meteor library and create a dashboard showing real-time data. By the end of this book you will have enough skills and will have worked through enough examples of real Vue.js projects to create interactive professional web applications with Vue.js 2.5.
Table of Contents (15 chapters)


All of our components are done! We only need to add some gameplay logic for the app to be playable. When the game begins, each players draws their initial hand of cards.

Then, each player's turn follows these steps:

  1. The player-turn overlay is displayed so that the player knows it's their turn.
  2. The last-play overlay shows them what the other player played during the last run.
  3. The player plays a card by clicking on it.
  4. The card is removed from their hand and its effects applied.
  5. We wait a bit so that the player can see these effects in action.
  6. Then, the turn ends, and we switch the current player to the other one.

Drawing cards

Before drawing the cards, we will need to add two properties to the app state in the state.js file:

var state = {
  // ...
drawPile: pile,
discardPile: {},

The drawPile property is the pile of cards that can be drawn by the players. It is initialized with the pile object defined in the cards.js file. Each key is the ID of a card definition, and the value is the amount...