Setup ingredients
Tags: vue, webdev, javascript, firebase
Published: 2021-02-17 06:36:21

---
title: Setup ingredients
published: true
date: 2021-02-17 06:36:00 UTC
tags: vue, webdev, javascript, firebase
series: Vue Full Application Build
canonical_url: https://hiltonmeyer.com/articles/series/pantry/3-ingredients.html
---

_Code for this can be found in the [Github Branch](https://github.com/bikingbadger/pantry/tree/3-add-ingredient)_

## Change About [#](https://hiltonmeyer.com/articles/series/pantry/3-ingredients.html#change-about)

In order to add ingredients we'll need a form, I'm thinking that with this form I should be able to setup a shopping list as a first milestone for the project. There is an about page that I'm not really sure that I'll be using so instead of deleting it I'll re-purpose it for the form to add ingredients and show the current list of ingredients.

## App.vue [#](https://hiltonmeyer.com/articles/series/pantry/3-ingredients.html#app.vue)

In `App.vue` I change the router-link from

```
<router-link to="/about">About</router-link>

```

to

```
<router-link to="/ingredients">Ingredients</router-link>

```

## Router [#](https://hiltonmeyer.com/articles/series/pantry/3-ingredients.html#router)

Next thing is setting the router so again I change the `router/index.js` from

```
{
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
}

```

to

```
{
    path: '/ingredients',
    name: 'Ingredients',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/Ingredients.vue')
}

```

## Ingredient Form [#](https://hiltonmeyer.com/articles/series/pantry/3-ingredients.html#ingredient-form)

For now I just want the layout of the form for being able to show a list of ingredients and the ability to add ingredients that are missing.

```
<template>
  <div class="ingredient">
    <div class="add-ingredient-frm">
      <div>
        <label for="name">Name:</label>
        <input type="text" name="name" id="name" />
      </div>
      <div>
        <label for="category">Category:</label>
        <select id="category" name="category">
          <option value="legumes">Legumes</option>
          <option value="vegetables">Vegetables</option>
          <option value="fruit">Fruit</option>
          <option value="dairy">Dairy</option>
        </select>
      </div>
      <div>
        <label for="uom">Unit of Measure:</label>
        <input type="text" name="uom" id="uom" />
      </div>
      <div><button>Add</button></div>
    </div>
    <ul>
      <li>Milk</li>
      <li>Whole wheat flour</li>
      <li>Olive Oil</li>
    </ul>
  </div>
</template>

```

![Ingredient Form](https://res.cloudinary.com/hiltonmeyer-com/image/upload/f_auto,q_auto,c_scale,w_auto,dpr_auto/v1611929567/hiltonmeyer.com/pantry-004_hovn32.jpg)

## Next steps [#](https://hiltonmeyer.com/articles/series/pantry/3-ingredients.html#next-steps)

The next thing that I want to do is be able to add an ingredient and save it to a database and the other would be to show those ingredients on the list. After that a search feature would be cool and then being able to add the ingredients to a shopping list which will already have the first milestone and allow me to start using the app for my weekly shopping.