Guided: Building a Budgeting Application in Vue 3

In this lab, you will be completing a simple budgeting application using the Vue front-end framework. You will be working with four files, which are BudgetForm.vue, BudgetItem.vue, BudgetList.vue, and App.vue. Completing this lab will involve the usage of essential Vue concepts such as event emissions, data binding, and interactions between parent and child components.

The app can be run at anytime by clicking the Run button or by running the npm run dev -- --host command in the Terminal. You can view the application's webpage in the Web Browser tab by refreshing the page.

First, you will need to complete the BudgetForm component. This component contains the form and input elements that allow the user to specify a total budget amount and the cost of each item.

Each instance of a component tracks its own state, or internal data, aptly stored within the data() function. This function returns an object containing the reactive (triggers an update when changed) state data. Components can emit data to other components. It's good practice to declare any emitted events through the emits property. The methods property of the component details all of the functions it is able to perform. For the BudgetForm component, it will need to have a submitBudgetAmountForm() and submitItemForm() methods which will be responsible for emitting the user input data to be displayed. With these done, now you will need to complete the form element for the component in the html template. The button elements have already been defined for you, but you will need to complete the form and input elements with data-bindings.

With the BudgetForm component done, a user can now input a total budget amount as well an item that has a description and amount. Now, you will need a BudgetItem component to display the item that a user inputs.

The important thing to take note of here is the use of props. Data that is given to a child component for its use from a parent component is stored in the props field of the component, much like emits and methods are. Now that props has been defined and takes an item, you can use the item to display its data within the template. This is done with declarative rendering, wherein data is enclosed within double brackets such as {{ exampleData }}. When this data is changed, the component will update to display the new data.

Now that BudgetItem is completed, you will need a component that displays all of them. This is where BudgetList comes into play. As you may notice at the top of BudgetList.vue, the BudgetItem component has been imported.

You will need to make it a child component of the BudgetList so that it can be used by the BudgetList. Like BudgetItem, the BudgetList will also need props because it needs to receive a list of objects containing a description and itemAmount. It will then pass the data in these objects to each BudgetItem that it renders. Lastly, render the BudgetItems as a single element within the template section. Although it's a single element, it will actually display all the BudgetItems if you use the v-for directive to iterate through the items prop.

Now that all of the individual components have been completed, it's time to put them all together within App.vue. There's nothing new going on here and will mostly follow the same development paradigms seen in the previous steps. Now that the components are defined, you will need to create a data property for App. Remember that the BudgetForm is a child component that sends data to the App parent, and the BudgetList is a child component that receives data from the App parent. Now you will need methods for App to perform based on the data it receives from its BudgetForm child component to dynamically update any changes to the totalBudget amount as well as any additional items to be budgeted. Lastly, you will need to render these child components within App. Since the BudgetForm component will be emitting data to the App, you will need model bindings(two-way) that are prefixed with an @. The BudgetList component will be receiving data from app, so it will need an attribute binding(one-way) prefixed with an :. With these steps completed, your application should be all set and ready to go! Refer back to the introduction on how to Run the application and see it for yourself in the Web Browser.