Chapter 4. Building Our First Vue.js Components

With our project set up and ready to go, it's time to start writing some more involved client-side code and build our first custom components. We'll start by creating a component to display a static list of products, with the option of selecting a product to view its full details. Then, we'll finish things off by creating some API endpoints to provide real data and hook our components up to them.

In summary, we'll be covering the following topics:

• Component composition
• Rendering collections of data with the v-for directive
• Data binding with the v-bind directive
• Event handling with the v-on directive
• Conditional rendering with the v-show and v-if directives
• Client-side routing
• Fetching data from an API