Featured resource
pluralsight tech forecast
2025 Tech Forecast

Which technologies will dominate in 2025? And what skills do you need to keep up?

Check it out
Hamburger Icon
  • Labs icon Lab
  • Core Tech
Labs

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.

Labs

Path Info

Level
Clock icon Beginner
Duration
Clock icon 1h 46m
Published
Clock icon Sep 12, 2022

Contact sales

By filling out this form and clicking submit, you acknowledge our privacy policy.

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.

Hampton began learning and creating in the digital realm over 15 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, hopefully outdoors, enjoying life’s simple pleasures.

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.