- Lab
- Core Tech

Build a Reading List Application With Vue.js
In this code lab, you'll follow instructions to build a reading list application with Vue.js 2.x. You'll create multiple components that are connected together to display a list of authors and book titles. Finally , you'll create a form that adds new books to the list.

Path Info
Table of Contents
-
Challenge
Creating the BookList Component
In this Lab you’ll follow along with our instructions and build a reading list application with Vue.js 3.x. You'll create multiple components that are connected together to display a list of authors and book titles, and you'll create a form that adds new books to the list.
In this module you'll write code to create a Vue component called BookList that displays a list of book titles and authors. ### Solution The solution can be found in the
solution
directory. -
Challenge
Looping Through a List of Books
In this module you'll write code that reads a list of book titles and authors from an array and displays them in a Vue component.
-
Challenge
Creating a Child Component
In this module you'll refactor a BookList component into two components - BookList and BookItem.
-
Challenge
Connecting BookItem as a Child Component of BookList
In this module you'll connect a child BookItem component to a parent BookList component.
-
Challenge
Creating a BookForm Component
In this module you'll create a BookForm component that calls a method on submit that adds a new title and author to an array of books and updates the display.
What's a lab?
Hands-on Labs are real environments created by industry experts to help you learn. These environments help you gain knowledge and experience, practice without compromising your system, test without risk, destroy without fear, and let you learn from your mistakes. Hands-on Labs: practice your skills before delivering in the real world.
Provided environment for hands-on practice
We will provide the credentials and environment necessary for you to practice right within your browser.
Guided walkthrough
Follow along with the author’s guided walkthrough and build something new in your provided environment!
Did you know?
On average, you retain 75% more of your learning if you get time for practice.