Vue3 Navigation, State Management and Form handling

This is the second part of a series of posts An Easy and Comprehensive Guide to Vue3. The goal is to provide a gentle pratical introduction to Vue3. You would find the first part here. You need to read this first part. You can also find the project’s source code here.

Layout

In the first part of this tutorial, our App.vue contains a RouterView component. We need to build a layout around this view. Layout components are components shared across multiple pages in our app.

App Header

First let’s create an AppHeader component.

Create a folder src/components/common and component src/components/common/AppHeader.vue.
Add this code to AppHeader.vue file:

Now import and use AppHeader component in App.vue:

App Sidebar

It’s time to add Sidebar to our app layout. The sidebar will display a list of available categories for our tasks. So let’s create a TodoCategory component:

Create src/components/TodoCategory.vue and add the following code:

Notice how we pass data from our component’s props to our CSS section using v-bind? This is an interesting vue feature. You can directly pass data from Javascript to CSS without losing the naturality of your component structure!

Create the sidebar component in src/components/common/AppSidebar.vue and add this code:

With this code, we create a list of categories and iteratively display them using TodoCategory component.

Now let’s update our App.vue component to adjust our layout and import AppSidebar:

Our dynamic page contents will be handled and displayed by RouterView while AppHeader and AppSidebar will remain static throughout the app. Let’s proceed to the next section to see how this works.

Navigation

VueJs use vue-router to manage navigation within our apps. Let’s create another page and programatically navigate between two pages.

Create a new file component we’ll use for adding new tasks src/views/CreateTaskView.vue and add the following code. We’ll update the code later but let’s take this as a new page.

Now update your src/router/index.ts file to import CreateTaskView and map it to a router path:

Now go to src/components/common/AppHeader, create a script section and update your template code:

Firstly, in the script tag, we created a new function goToRoute that accepts the destination route’s name as parameter. If you go back and check src/router/index.ts, you would notice we have a name property on each defined route. You can pass a name as part of the options for router.push() and vue will take you to the destination.

Secondly, we added Click Event to both app_title and add_icon elements which respectively call goToRoute and supply the destination route names.

Now save your project, click on add_icon and you’ll see this takes you to CreateTaskView. Click on app_title and it will take you back to the HomeView.

Local State Management

Before we build out the form for creating a new task, let’s do a quick introduction to state management in VueJs. Think of a state as a piece of data which when updated, its changes is reflected in the UI.

Ref API

We can use vue’s ref to convert a Javascript value to a vue state. As an example, let’s update our CreateTaskView with this code:

We create a variable count and function increment for incrementing count variable. We also log the current value of count. In the template, we display the value of count and add a button which calls increment everytime it’s clicked.

Navigate to http://localhost:5173/create-task (if you’re not there already) and click on the Increment button. Nothing seems to be happening right? If you open your browser’s inspection tool and check the console tab however, you’ll notice the value of count is continuously updated as you click on the button. The changes is not reflected on the UI because you didn’t “mark” the count value as a state.

Now let’s update the script section of our code:

Now we wrapped the value of count in vue’s ref function. This marks count as a state whose changes should reflect on the UI. To access the actual value of count within our Javascript code, we need to get the value property this way count.value. This is because ref(data) returns a Ref<T> object where T is the type of data. To access or update the actual data value, you need to get the value property. Now click the Increment button again and you’ll see your changes reflecting.

Notice that calling the value property is not required within the template.

Reactive API

What if a state is an object with many properties? Calling obj.value.property to access/update each property may seem ineffecient. Let’s demonstrate how reactive instead of ref addresses this issue. Update your CreateTaskView with this code:

This code attempts to toggle between two person object values. When restore is true, we set person to defaultDetails. Otherwise, we add some values. Your real-world implementation may be simpler. For example, we had to create a deep clone of defaultDetails (using Javascript’s structuredClone) because we need to use its original data to restore the value of person. The main lesson here is that we’re able to access/update the properties of person state in the same way we would access/update a normal Javascript object.

V-Model

All the state changes we’ve observed so far are one-directional. They’re based on changes triggered by our Javascript code. That is, changes only flow from script to template. What if we want to update a state based on, say user-input? Vue’s v-model helps us bind user input fields to Javascript state, without the need to manually watch and update input values through events. Let’s see v-mode in action. Replace CreateTaskView with the following code:

Now we have two input fields, each binded to the properties of person state and changes made through the fields are automatically reflected in our template.

Creating Forms

With our understanding of vue’s ref, reactive and v-model we can now build our form for creating new tasks.

Sharing Modules

First let’s create a module that will hold data model shared across our app.

Create a new typescript file at src/shared.ts

Now go to src/components/common/AppSidebar.vue and cut (instead of copy) the categories array that we created earlier. Paste and export the categories array in the newly created shared.ts file:

Now you can use the categories array anywhere in your app by import. Let’s import it back into AppSidebar.vue:

At this point, it’s cool to rename our categories array to tags. If you’re using VSCode, go to src/shared.ts, move your cursor on top of categories variable declaration and press F2 key. Rename categories to tags. This will rename the variable in all the imports.

Another thing we need to do is create and export a TaskType model that we’ll use to define our task later. Add this typescript type declaration to shared.ts module after tags array:

Create Custom Field and Button

Now we need to create a custom reusable input field for our form.

Create a new SFC at src/components/common/InputField.vue and add the following template and script:

As you may have noticed, we render a textarea tag or an input tag, based on whether the type prop of our component is “textarea” or any other string. In other words, if the prop is “textarea”, we show a textarea tag else, we show input tag. Notice how we use v-if and v-else to handle this condition.

Another thing you would notice is how we use vue’s defineModel API (instead of ref) to create a model variable which we then pass to our input and textarea v-model. We use defineModel here because we want our InputField component to emit its changes to its parent component, so any parent can collect changes to model by binding their own variable to InputField’s v-model. We’ll see all of this in action very soon.

Now add the following style to InputField:

Let’s create a custom button for our app. Create an SFC at src/components/common/AppButton.vue and paste the following code:

Build New Task Form

It’s time to build out our new task form.

Clear everything we’ve written in src/views/CreateTaskView.vue and add the following template:

This template uses our custom InputField twice – one for text field and another for textarea. In both cases, we’re binding the field’s input to a property of newTask object. Now you should understand why we used defineModel earlier. Using defineModel makes it possible to emit changes to model on the fly.

Now let’s add our script section. Please study the code and see if you could learn some things:

Lastly, let’s style our form:

If you would like to connect, please contact me.