Guided: Building a Flashcard App in Vue 3

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.

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!

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!

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!

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!

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.