Table of Contents

1. 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.

2. 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.

3. Challenge

   Creating a Child Component

   In this module you'll refactor a BookList component into two components - BookList and BookItem.

4. Challenge

   Connecting BookItem as a Child Component of BookList

   In this module you'll connect a child BookItem component to a parent BookList component.

5. 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. After you've completed the above tasks, run npm run dev in your Terminal tab, and then switch to and refresh the Web Browser tab to view your app.