├── .editorconfig ├── .env.example ├── .gitignore ├── .vscode └── extensions.json ├── README.md ├── index.html ├── package-lock.json ├── package.json ├── postcss.config.cjs ├── public └── vite.svg ├── src ├── App.vue ├── assets │ └── vue.svg ├── axiosClient.js ├── components │ ├── DefaultLayout.vue │ ├── GuestLayout.vue │ ├── MealItem.vue │ ├── Meals.vue │ ├── Navbar.vue │ └── YouTubeButton.vue ├── filters │ └── index.js ├── main.js ├── router │ └── index.js ├── store │ ├── actions.js │ ├── getters.js │ ├── index.js │ ├── mutations.js │ └── state.js ├── style.css └── views │ ├── Home.vue │ ├── Ingredients.vue │ ├── MealDetails.vue │ ├── MealsByIngredient.vue │ ├── MealsByLetter.vue │ └── MealsByName.vue ├── tailwind.config.cjs └── vite.config.js /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_size = 2 5 | tab_width = 2 6 | charset = utf-8 -------------------------------------------------------------------------------- /.env.example: -------------------------------------------------------------------------------- 1 | VITE_API_BASE_URL = https://www.themealdb.com/api/json/v1/1/ -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | .env 15 | 16 | # Editor directories and files 17 | .vscode/* 18 | !.vscode/extensions.json 19 | .idea 20 | .DS_Store 21 | *.suo 22 | *.ntvs* 23 | *.njsproj 24 | *.sln 25 | *.sw? 26 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["Vue.volar"] 3 | } 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Receipt Search app built with Vue.js 2 | This repository is created alongside the following [YouTube Tutorial](https://youtu.be/cfiN8lCA3RM) 3 | 4 | ## Demo 5 | [https://tc-search-meals.netlify.app](https://tc-search-meals.netlify.app/) 6 | 7 | ## Installation 8 | 1. Clone the repository 9 | 1. Run `npm install` 10 | 1. Copy `.env.example` into `.env` 11 | 1. Run `npm run dev` to start the application at http://localhost:3000 12 | 13 | 14 | ## Recommended IDE Setup 15 | 16 | - [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) 17 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 5 | 6 | 7 |15 | {{ $filters.truncateWords(meal.strInstructions, 20) }} 16 |
17 |