Featured resource
2025 Tech Upskilling Playbook
Tech Upskilling Playbook

Build future-ready tech teams and hit key business milestones with seven proven plays from industry leaders.

Check it out
  • Lab
    • Libraries: If you want this lab, consider one of these libraries.
    • Core Tech
Labs

Guided: Building a Flashcard App in Vue 3

Lab platform
Lab Info
Level
Intermediate
Last updated
Aug 08, 2025
Duration
1h 35m

Contact sales

By filling out this form and clicking submit, you acknowledge our privacy policy.
Table of Contents
  1. Challenge

    Introduction

    In this lab, you will be creating a simple Flashcard studying application in Vue.js. You will be working on 5 different files, which are Flashcard.vue, FlashcardForm.vue, FlashcardList.vue, FlashcardScroller.vue and finally App.vue, which will incorporate the other components. Completing this lab will involve the usage of Vue concepts such as interactions between parent and child components, binding variables, and the use of custom and built-in directives.

    The app can be run by clicking the Run button at the bottom right of the terminal or by running the command npm run dev -- --host within the terminal. You can view the app in the Web Browser tab by refreshing the page.

  2. Challenge

    Complete the Flashcard Component

    First, you will be working in the Flashcard component. This component contains the term and definition of each card and displays it according to the view selected.

    Props are variables that can be passed into the component by a parent component, and the type, necessity, and other characteristics of these variables are defined in the props object. Each component tracks its own data, stored within the data() function. This function returns an object containing the state data. This state data will trigger an update if changed within the component. The object methods defines all of the Javascript functions that can be used by the component. This component only needs the flip function, which will be used in the scroller view to flip the card between its term and definition. To complete the component, you will need to adjust the current html template at the top of the file to be responsive to the list variable. You will then need to create elements within the existing html to display the correct information. The Flashcard component is now complete!

  3. Challenge

    Complete the FlashcardForm Component

    Next, you will be working in the FlashcardForm component. This component contains the form elements that allow the user to add new Flashcards.

    Once again, you will be altering the data() function. The FlashcardForm component is now complete!

  4. Challenge

    Complete the FlashcardList Component

    Next, you will be completing the FlashcardList component. This component combines the Flashcard and FlashcardForm components to display them as a list and allow the user to add new flashcards. The components object registers all of the custom components you are using in the template. Without importing and registering correctly, these components will not work. The FlashcardList component is now complete!

  5. Challenge

    Complete the FlashcardScroller Component

    Next, you will be completing the FlashcardScroller component. This component uses the Flashcard component to display flashcards in a scroller view in a study format. The FlashcardScroller component is now complete!

  6. Challenge

    Implement the App Component

    To complete the application, you will implement the components you have made in the App.vue file. You will begin by doing many of the same steps as previous components. Congratulations! The entire application is now complete!

    You can see it working by clicking the Run button at the bottom right of the terminal or by running the command npm run dev -- --host within the terminal. You can view the app in the Web Browser tab by refreshing the page.

About the author

Real skill practice before real-world application

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.

Learn by doing

Engage hands-on with the tools and technologies you’re learning. You pick the skill, we provide the credentials and environment.

Follow your guide

All labs have detailed instructions and objectives, guiding you through the learning process and ensuring you understand every step.

Turn time into mastery

On average, you retain 75% more of your learning if you take time to practice. Hands-on labs set you up for success to make those skills stick.

Get started with Pluralsight