Back

Recipe Page

A recipe page that shows mock data of a recipe, made as dynamic as possible to show anything as long as the data conforms to the presented format, a path-ending challenge by Frontend Mentor.

vuetailwindcssvite

Links

Media

Desktop

Desktop

Features

  • Responsive Design: The design is responsive and works on all screen sizes (I hope).
  • Dynamic Data: The recipe data is fetched from a JSON file and displayed on the page. There is a button called Swap Recipe on the bottom of the page that allows you to swap the recipe with another, formatted in the same format as the original, and see how the page adapts and displays correctly.

What I learned

  • Emitting events in Vue Components with $emit and defineEmits. To be able to listen to the emitted events, v-on had to be exactly on the component that emitted it, not a general parent like I thought.
  • Vue SFCs made the source code very easily comprehensible and organized. I could easily see what was going on in each section of the page.

Continued development

For the nutrtions part, I wanted to use tables, but I didn’t know how to style them as a lot of stuff like padding doesn’t seem to work on tables. I was going insane so i just used a simple flexbox. Would prefer to style the table properly next time for accessibility reasons.