Recipe-box using VueJS
This is my third project using VueJS under Data Visualization Certification from FreeCodeCamp. I used vue-material for this app. This project took more time compared to the earlier projects. I also learnt more about Vue’s event emitters and props and Vue-material’s modals.
If you are using webpack-simple template like me (which is sufficient for small projects like this, unless you want to include testing), in order to import vue-material.css from node_modules folder in your javascript, it is important to install css-loader and style-loader modules. I forgot to do this and spent a long time figuring out what went wrong.
LocalStorage
Local Storage is easy to accomplish using HTML5. There is a localStorage web API with 2 methods — getItem and setItem to store and retrieve data from the browser’s local storage. Remember to stringify your data while storing using setItem (using json.stringify) and parse string to JSON (using json.parse)while retrieving data using getItem .
When the user opens recipe-box app, the program first checks if there is a localStorage object named recipes , retrieves if there is one, if not sets one:
Also, update the recipe data in localStorage using setItem whenever there is a add/delete/edit operation in the recipe-list.
Modal and EditmodalComponents
These are the distinct components for this app while the others such as App.vue and recipe.vue are similar to the previous project.
modal.vue component is used to add a recipe. In Vue, props are used to send data from parent to child components. To send data from a child component to its parent component, event emitters are used. Event emitters form the main crux in this project. Whenever a new recipe-item is added, the modal component emits an add event and passes the item object to its parent, App component like so:
this.$emit(‘add’, item)
Similarly, the recipe.vue component which displays the recipes array using v-for directive, uses a child component — editmodal.vue. I spent a lot of time spent on edit modal functionality — retaining the data that was clicked in the editmodal. Similar to add this component captures the id, title and ingredients of the object and sends the object to the parent recipe which in turn sends to its parent, the App component using events. The App component captures this emitted object and updates the recipes object as well as the localStorage.
App Demo
The project is live here.
Source code is here.
The Project finally looks like this :
