Expanded Library

Build a Reading List Application With Vue.js

What you'll learn

In this project you’ll follow along with our instructions and 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, and you'll create a form that adds new books to the list.

Table of contents

Setup
15m
  • Set up your local environment for projects. We'll walk you through everything you need to know, including how to install and configure your environment to be able to complete all of the tasks.
Creating the BookList Component
15m
  • Write code to create a Vue component called BookList that displays a list of book titles and authors.
Looping Through a List of Books
15m
  • Write code that reads a list of book titles and authors from an array and displays them in a Vue component.
Creating a Child Component
10m
  • Refactor a BookList component into two components - BookList and BookItem.
Connecting BookItem as a Child Component of BookList
10m
  • Connect a child BookItem component to a parent BookList component.
Creating a BookForm Component
25m
  • 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.

About the author

Hampton began learning and creating in the digital realm over 20 years ago and enjoys helping students improve and work toward their goals. When he's not working on the computer, you’ll find him spending time with his family, playing with data, and building things to break other things.

Ready to upskill? Get started