{"id":21246836,"url":"https://github.com/apfirebolt/meals-database-app-using-vue-3","last_synced_at":"2026-04-28T15:42:16.251Z","repository":{"id":114819792,"uuid":"494338639","full_name":"Apfirebolt/meals-database-app-using-vue-3","owner":"Apfirebolt","description":"Meals database app which uses Open API from theMealDB.com for data, vue 3 is used for front-end and PrimeVue is used for UI components","archived":false,"fork":false,"pushed_at":"2022-05-20T08:31:39.000Z","size":5356,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-20T20:00:25.240Z","etag":null,"topics":["api-integration","primevue","themealdb-api","vue","vue3","vue3-composition-api"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Apfirebolt.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-05-20T05:55:06.000Z","updated_at":"2025-01-29T02:10:17.000Z","dependencies_parsed_at":null,"dependency_job_id":"d8b1fcb0-0f1d-452e-8da0-338495b6ba34","html_url":"https://github.com/Apfirebolt/meals-database-app-using-vue-3","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Apfirebolt/meals-database-app-using-vue-3","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Apfirebolt%2Fmeals-database-app-using-vue-3","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Apfirebolt%2Fmeals-database-app-using-vue-3/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Apfirebolt%2Fmeals-database-app-using-vue-3/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Apfirebolt%2Fmeals-database-app-using-vue-3/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Apfirebolt","download_url":"https://codeload.github.com/Apfirebolt/meals-database-app-using-vue-3/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Apfirebolt%2Fmeals-database-app-using-vue-3/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32387922,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-28T14:34:11.604Z","status":"ssl_error","status_checked_at":"2026-04-28T14:32:37.009Z","response_time":56,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["api-integration","primevue","themealdb-api","vue","vue3","vue3-composition-api"],"created_at":"2024-11-21T02:07:23.438Z","updated_at":"2026-04-28T15:42:11.243Z","avatar_url":"https://github.com/Apfirebolt.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"![Vue.js](https://img.shields.io/badge/vuejs-%2335495e.svg?style=for-the-badge\u0026logo=vuedotjs\u0026logoColor=%234FC08D)\n\n# Meals DB application using OpenMealsDB and PrimeVue ⚡️\n\n## Project Briefing\n\nThis is a simple database application which integrates with an open source Meals database API \u003ca href=\"https://www.themealdb.com/api.php\"\u003e https://www.themealdb.com/api.php \u003c/a\u003e which I found recently. I have worked on other APIs created by this organization like CocktailAPI which has been a pleasant experience for me.\n\nI wanted to experiment with the composition API and hooks based approach of API integration in Vue without the use of Vuex. I needed an open API which I can use as data source for this. I read about this open API in one of the blog posts I stumbled across lately and found this API to be apt for this.\n\nAs for UI, I try to experiment with different UI frameworks available for Vue. In this case, I went with PrimeVue. I found it relatively easy to get started with, has a wide range of components to offer and a nice color schema.\n\nThis project takes inspiration from Sakai Vue template created using PrimeVue. It is an open source admin template and can be found here https://github.com/primefaces/sakai-vue. It has multiple themes in it which can be changed through the button on the right side of the screen. It has various colors and their versions, light and dark themes are also available. That is the reason why 97% of the codebase of this project contains CSS.\n\nMade with ❤️ by **[@apfirebolt](https://github.com/Apfirebolt/)**\n\nPlease find me [here](https://apgiiit.com/)\n\n### PrimeVue Theme\n\nSakai Admin, which is used to built this uses the free Saga, Arya and Vela themes which are distributed within PrimeVue, however it can be used with any PrimeVue theme as well such as material, tailwind and bootstrap as layout colors are derived from the theme used via CSS variables.\n\n### Dependencies\n\nFollowing PrimeVue packages are used for this project.\n\n```\n{\n    \"primevue\": \"~3.12.2\",\n    \"primeicons\": \"~5.0.0\",\n    \"primeflex\": \"~3.1.2\",\n}\n```\n## Features\n\n- Demonstrates use of various components of PrimeVue like Table, Dialogue, Cards and others.\n- Modern architecture for Vue 3 which follows composition API for organizing various entities within a Vue page.\n\n## Built With\n\n* [Vue](https://reactjs.org/)\n* [Vue 3 Composition API](https://vuejs.org/api/composition-api-setup.html/)\n* [PrimeVue](https://www.primefaces.org/primevue/)\n\n## Project setup\n\nSimply install node modules for the Vue app and you're done at least for the development mode. Next step is running the application using the serve script and navigate to http://localhost:8080/ to view the application. That is it, in my case 8080 was occupied with Jenkins so the app was running on port 8081.\n\n```\nnpm install\nnpm run serve\n```\n\nFor production, build the frontend of the app. \n\n```\nnpm run build\nnpm run serve\n```\n## Issues\n\nNo issues as of now, would be added later if discovered.\n\n## Future Updates\n\n- Expect UI improvements in near future for this app as I get more familiar with PrimeVue.\n- Docker deployment might be added later.\n\n## Project Screenshots\n\nPlease find some of the screenshots of the application. The image below displays the homepage of the application, homepage is equipped with API call which would display a random meal for you at the beginning as well as every time you click on the button.\n\n![alt text](./screenshots/home.jpg)\n\nMeals page is shown below. Initially it loads all the meals starting with 'a', you can filter meals by name, category, first letter and area.\n\n![alt text](./screenshots/meals.png)\n\nMeals page with filter dialogue. \n\n![alt text](./screenshots/filter_meals.png)\n\nShows all the meal categories available with description coming from the API.\n\n![alt text](./screenshots/category.png)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapfirebolt%2Fmeals-database-app-using-vue-3","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fapfirebolt%2Fmeals-database-app-using-vue-3","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapfirebolt%2Fmeals-database-app-using-vue-3/lists"}