Our card game is finished. We saw a lot of new features provided by Vue that enable us to create rich and interactive experiences easily. However, the one most important thing we introduced and used in this chapter is the component-based approach to web application development. This helps us develop larger applications by splitting our frontend logic into small, isolated, and reusable components. We covered how to make components communicate with each other, from parent to children with props and from child to parent with custom events. We also added animations and transitions (with the <transition> and <transition-group> special components) to the game to make it more alive. We even manipulated SVG inside our templates and dynamically displayed a component with the special <component> component.

In the next chapter, we will set up a more advanced application with Vue component files, among other features that will help us build even larger applications.