Building a Recipe App with Vuetify

In this chapter, we’ll leverage the power of a third-party component library to quickly scaffold out a user interface and explore the powers and usage of a store in the context of an app. We will build a meal planner where a user can browse recipes to add them to a weekly calendar. The state of the week planner will be stored on the user’s machine to make sure it’s available on returning visits.

In this chapter, we’ll cover the following topics:

• Applying and customizing Vuetify to scaffold out views
• Speeding up development using a component library
• Refactoring strategies
• Understanding state
• The usefulness of structuring stores using Pinia

Technical requirements

We’ll be using Vuetify (https://vuetifyjs.com/en/) in this chapter, a popular component library for Vue.js 3 applications. We also need to register for an API key at https://spoonacular.com/ to retrieve recipe data.

To manage our applications’ state, we’ll use Pinia (https://pinia.vuejs.org/). We’ll use a composable from VueUse (https://vueuse.org/) to leverage localStorage in our app.

The code for this chapter can be found in this book’s GitHub repository: https://github.com/PacktPublishing/Building-Real-world-Web-Applications-with-Vue.js-3/tree/main/05.mealplanner.

A new Vue project

We’re ready to initialize a new project, but we’ll use the Vuetify installer this time. Vuetify is a wrapper around the Vue installer, with presets for common Vuetify project configurations. In the CLI, type the following command to proceed to the next steps of the installer wizard:

npm create vuetify

Now, do the following:

1. Choose vue-meal-planner as the project’s name.
2. Use the Base (Vuetify, VueRouter) installation.
3. Select TypeScript using the arrow keys.
4. Select the npm option to install the dependencies.

If you navigate to the new projects folder, you can run the local development server with npm run dev. The result should look very similar to what’s shown in Figure 5.1:

Figure 5.1 – The initialized Vuetify application

Before we continue, we also need an API key to make the example a bit closer to reality. This will also allow us to search for actual recipes. To register...

Let’s get cooking

First, we’ll make sure we have a decent boilerplate project to begin with and start by replacing the contents of App.vue with the following:

<script setup lang="ts"></script>
<template>
  <v-layout>
    <v-container class="main">
      <main>
        <router-view />
      </main>
    </v-container>
    <v-footer app><span class="text-light-green">My Meal Planner</span>&nbsp;- &copy; {{ new Date().getFullYear() }}</v-footer>
  </v-layout>
</template>

We’ll expand on this later. Note that in the generated Vue component, the order of the <template> and <script> tags is different. I prefer starting with the <script> tag because...

Quick development with Vuetify

The app we’ve built so far isn’t much use to us yet. Let’s turn this into a working meal planner! Since we are going to want to abstract and compartmentalize, we’ll start by splitting some of the code of the CalendarDays.vue component.

First, we’ll create a new component, called CalendarCard.vue. We will use this to represent a calendar item and use the date formatter we’ve created:

<script setup lang="ts">import { useFormatDate } from "@/composables/formatters";
interface Card {
  date: Date;
}
const props = defineProps<{
  card: Card;
}>();
</script>
<template>
  <v-sheet class="d-flex justify-space-between">
    <v-sheet class="ma-2 pa-2">
      <h2 class="text-h2">{{ useFormatDate(card.date) }}</h2>
    <...

Connecting the recipes to our app

In this section, we’ll connect the API to our app, which allows users to start planning meals for upcoming days. We’ll explore patterns to interact with an app using the Vuetify components.

A bit of additional setup

Because we are going to deal with asynchronous data, we’ll add some helper components. First, we’ll create an AppLoader.vue component in the src/components folder, which acts as a loading indicator:

<template>  <v-container class="fill-height" fluid>
    <v-row align="center" justify="center">
      <v-col cols="12" sm="8" md="4">
        <div class="text-center my-8">
          <v-progress-circular
         ...

Using Pinia for state management

In this section, we’ll focus on making our application stateful using Pinia. This means we will have to refactor existing code, optimize certain flows, and add new features to our application.

Stateful applications

We use the term stateful applications to describe applications that can use, save, and persist data for a certain amount of time. A state can be temporary (while a session lasts) or of a more permanent nature when stored in a database.

The state is contextual to the current user and is typically not shared between users. In short, it is representative of the current user's state of interacting with an application.

Adding Pinia

Pinia is a framework for managing states of applications built using Vue.js 3. It aims to facilitate sharing and interacting with a state or store by leveraging composables and simple syntax.

Let’s add Pinia to our project by installing it using the command line:

npm install pinia...

Summary

In this chapter, we combined two concepts to build an application that scales well in development. As we’ve seen, by adopting more and more of the principles of both the component library as well as a centralized store, the more readable and simplified our code becomes.

Using a component library such as Vuetify provides us with a quick way of adding interactive elements to a user interface that are well tested and easy to use out of the box. Coming with means of customization and theming, we can make sure that our implementation follows any style guide.

This would be a good time to try your hand at customizing the user interface, either by setting up themes and styles or just by using the classes and properties on existing components.

By adding state to our app, we’ve made it usable and reusable for our users. In our example, we’ve stored our data in the browser, which isn’t as portable. However, it does give us a practical look at dealing...