Create a Comprehensive Recipe Application Using Vue 3
Written on
Chapter 1: Introduction to Vue 3
Vue 3 is the latest iteration of the user-friendly Vue JavaScript framework, enabling the development of dynamic front-end applications. This article will guide you through the process of building a recipe application using Vue 3 and JavaScript.
To kick things off, we need to set up our project.
Section 1.1: Setting Up the Project
We can initiate our Vue project using the Vue CLI. Begin by installing it with the following commands:
npm install -g @vue/cli
or
yarn global add @vue/cli
Next, create your project by running:
vue create recipe-app
Select the default options when prompted. Additionally, to generate unique identifiers for our recipe items, we need the uuid package. Install it using:
npm install uuid
Subsection 1.1.1: Building the Recipe App
In this section, we will construct the recipe application. Here's the template structure:
<template>
<form @submit.prevent="addRecipe">
<div>
<label>Recipe Name</label>
<input v-model="recipe.name" />
</div>
<div>
<label>Ingredients</label>
<textarea v-model="recipe.ingredients"></textarea>
</div>
<div>
<label>Preparation Steps</label>
<textarea v-model="recipe.steps"></textarea>
</div>
<button type="submit">Add Recipe</button>
</form>
<div v-for="(r, index) in recipes" :key="r.id">
<h1>{{ r.name }}</h1>
<h2>Ingredients</h2>
<div class="content">{{ r.ingredients }}</div>
<h2>Preparation Steps</h2>
<div class="content">{{ r.steps }}</div>
<button type="button" @click="deleteRecipe(index)">Delete</button>
</div>
</template>
The script section is as follows:
<script>
import { v4 as uuidv4 } from "uuid";
export default {
name: "App",
data() {
return {
recipe: {
name: "",
ingredients: "",
steps: "",
},
recipes: [],
};
},
computed: {
formValid() {
const { name, ingredients, steps } = this.recipe;
return name && ingredients && steps;
},
},
methods: {
addRecipe() {
if (!this.formValid) {
return;}
this.recipes.push({
id: uuidv4(),
...this.recipe,
});
},
deleteRecipe(index) {
this.recipes.splice(index, 1);},
},
};
</script>
The template showcases a form with fields for the recipe name, ingredients, and preparation steps. The v-model directive links the input fields to the corresponding reactive properties. The @submit directive enables submission of the form when the "Add Recipe" button is clicked, preventing the default server-side action.
The recipes are displayed using the v-for directive, which iterates over the recipes array. Each recipe is assigned a unique key to help Vue identify the elements efficiently. A button for deleting recipes is also included.
The script section defines the application's data properties and methods. The formValid computed property ensures that all fields are filled before adding a recipe. The addRecipe method checks this validity and pushes the new recipe to the recipes array, while the deleteRecipe method removes a recipe based on its index.
In the style section, we apply white-space: pre-wrap; to preserve the formatting of the content.
Chapter 2: Video Tutorials
To further enhance your understanding of building applications with Vue, check out the following video resources:
The first video, titled "Build a Recipe app in VUE using Router & Vuex! (Composition & Options API)", provides a comprehensive overview of using Vue Router and Vuex for state management.
The second video, "Built Complete Vue 3/Vuex application in 3 hours", takes you through an extensive guide to building a complete application using Vue 3 and Vuex.
Conclusion
Creating a recipe application with Vue 3 and JavaScript is a straightforward process that allows you to leverage modern web development techniques. If you found this article useful, explore more similar content on our channel!