{"id":19176927,"url":"https://github.com/javi-cc/vue3-api-client","last_synced_at":"2025-05-07T19:46:59.558Z","repository":{"id":110763950,"uuid":"440210493","full_name":"JAVI-CC/VUE3-API-client","owner":"JAVI-CC","description":"Application made with Vue 3 using Quasar Framework that contains responsive web interface, PWA and exported in APK using Apache Cordova and Capacitor. The application is connected to an API made in Laravel. https://laravel-api-server.up.railway.app","archived":false,"fork":false,"pushed_at":"2024-05-12T16:17:40.000Z","size":8285,"stargazers_count":4,"open_issues_count":1,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-20T02:34:52.066Z","etag":null,"topics":["api-client","apk","axios","capacitor","cypress","docker","docker-compose","jest","progressive-web-app","pusher","pwa","quasar-framework","spa","vercel","vue","vue3","vue3-composition-api","vuejs","vuelidate","vuex"],"latest_commit_sha":null,"homepage":"https://vue-api-client.vercel.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/JAVI-CC.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2021-12-20T15:03:45.000Z","updated_at":"2024-05-12T16:17:44.000Z","dependencies_parsed_at":"2024-11-09T10:42:43.501Z","dependency_job_id":null,"html_url":"https://github.com/JAVI-CC/VUE3-API-client","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JAVI-CC%2FVUE3-API-client","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JAVI-CC%2FVUE3-API-client/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JAVI-CC%2FVUE3-API-client/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JAVI-CC%2FVUE3-API-client/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JAVI-CC","download_url":"https://codeload.github.com/JAVI-CC/VUE3-API-client/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252948111,"owners_count":21830078,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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-client","apk","axios","capacitor","cypress","docker","docker-compose","jest","progressive-web-app","pusher","pwa","quasar-framework","spa","vercel","vue","vue3","vue3-composition-api","vuejs","vuelidate","vuex"],"created_at":"2024-11-09T10:31:12.834Z","updated_at":"2025-05-07T19:46:59.537Z","avatar_url":"https://github.com/JAVI-CC.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\u003cimg src=\"public/capturas/logo.png\" width=\"400\"\u003e\u003c/p\u003e\n\n\u003cp\u003eApplication made with Vue 3 using Quasar Framework that contains responsive web interface, PWA and exported in APK using Apache Cordova and capacitor. The application is connected to an API made in Laravel.\u003ca href=\"https://laravel-api-server.up.railway.app\" target=\"_blank\"\u003ehttps://laravel-api-server.up.railway.app\u003c/a\u003e\u003c/p\u003e\n\n\u003cspan\u003eApplication made with Vue 3 consists of the creation of a CRUD and authentication system that come from a games API and the development of styles using Quasar Framework. The application made with Vue 3 contains the following functionalities:\u003c/span\u003e\n\n\u003cul\u003e\n\u003cli\u003eI use the Vue3 version with the composition API.\u003c/li\u003e\n\u003cli\u003eStyle development with Quasar Framework.\u003c/li\u003e\n\u003cli\u003eVUEX.\u003c/li\u003e\n\u003cli\u003eAXIOS.\u003c/li\u003e\n\u003cli\u003eKeep-alive.\u003c/li\u003e\n\u003cli\u003eVue-router.\u003c/li\u003e\n\u003cli\u003ePWA (Progressive Web Apps).\u003c/li\u003e\n\u003cli\u003eSPA (Single Page Application).\u003c/li\u003e\n\u003cli\u003eApplication exported in APK using Apache Cordova.\u003c/li\u003e\n\u003cli\u003eApplication exported in APK using Capacitor.\u003c/li\u003e\n\u003cli\u003eElectron.\u003c/li\u003e\n\u003cli\u003eThe project contains the files to implement it in Docker.\u003c/li\u003e\n\u003cli\u003eVue-validate.\u003c/li\u003e\n\u003cli\u003eHelpers.\u003c/li\u003e\n\u003cli\u003eWatchers.\u003c/li\u003e\n\u003cli\u003eProps.\u003c/li\u003e\n\u003cli\u003eSlots.\u003c/li\u003e\n\u003cli\u003eEmits.\u003c/li\u003e\n\u003cli\u003eWebsockets with Pusher.\u003c/li\u003e\n\u003cli\u003eEnd to end tests with CYPRESS.\u003c/li\u003e\n\u003cli\u003eUnit tests with JEST.\u003c/li\u003e\n\u003cli\u003eThe application is connected to a games API made in Laravel: \u003ca href=\"https://github.com/JAVI-CC/Laravel-API-Server\" target=\"_blank\"\u003ehttps://github.com/JAVI-CC/Laravel-API-Server\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003ch2\u003eDemo\u003c/h2\u003e\n\u003ca href=\"https://vue-api-client.vercel.app/\" target=\"_blank\"\u003ehttps://vue-api-client.vercel.app\u003c/a\u003e\u003cbr\u003e\n\u003cspan\u003eUser: admin@email.com\u003c/span\u003e\u003cbr\u003e\n\u003cspan\u003ePassword: 12345678\u003c/span\u003e\n\n\u003ch2\u003eStart the app in the development mode\u003c/h2\u003e\n\u003cpre\u003e\u003ccode\u003e$ yarn \u0026\u0026 quasar dev -m pwa\u003c/code\u003e\u003c/pre\u003e\n\n\u003ch2\u003eStart the app in the production mode\u003c/h2\u003e\n\u003cpre\u003e\u003ccode\u003e$ yarn \u0026\u0026 quasar build -m pwa\u003c/code\u003e\u003c/pre\u003e\n\n\u003ch2\u003eExport the app in APK apache cordova in the development mode\u003c/h2\u003e\n\u003cpre\u003e\u003ccode\u003e$ yarn \u0026\u0026 quasar dev -m cordova -T android\u003c/code\u003e\u003c/pre\u003e\n\n\u003ch2\u003eExport the app in APK apache cordova in the production mode\u003c/h2\u003e\n\u003cpre\u003e\u003ccode\u003e$ yarn \u0026\u0026 quasar build -m cordova -T android\u003c/code\u003e\u003c/pre\u003e\n\n\u003ch2\u003eExport the app in APK capactior in the production mode\u003c/h2\u003e\n\u003cpre\u003e\u003ccode\u003e$ yarn \u0026\u0026 quasar build -m capacitor -T android -d\u003c/code\u003e\u003c/pre\u003e\n\n\u003ch2\u003eStart the app in the electron mode\u003c/h2\u003e\n\u003cpre\u003e\u003ccode\u003e$ yarn \u0026\u0026 quasar dev -m electron\u003c/code\u003e\u003c/pre\u003e\n\n\u003ch2\u003eExport the app in EXE electron in the production mode\u003c/h2\u003e\n\u003cpre\u003e\u003ccode\u003e$ yarn \u0026\u0026 quasar build -m electron\u003c/code\u003e\u003c/pre\u003e\n\n\u003ch2\u003eStart the websockets with Pusher in the development mode (Optional)\u003c/h2\u003e\n\u003cpre\u003e\u003ccode\u003e1. In your \u003ca href=\"https://pusher.com/\" target=\"_blank\"\u003ePusher account\u003c/a\u003e create a channel called: \u003cstrong\u003ejuegos-api\u003c/strong\u003e\u003c/code\u003e\u003c/pre\u003e\n\u003cpre\u003e\u003ccode\u003e2. Enter the file: \u003cstrong\u003edevelopment.env\u003c/strong\u003e\u003c/code\u003e\u003c/pre\u003e\n\u003cpre\u003e\u003ccode\u003e3. fill in the following credentials:\n\u003cbr\u003e\u003cstrong\u003ePUSHER_APP_KEY=\u003c/strong\u003e{App Keys in the channel juegos-api key}\n\u003cbr\u003e\u003cstrong\u003ePUSHER_APP_CLUSTER=\u003c/strong\u003e{App Keys in the channel juegos-api cluster}\n\u003c/code\u003e\u003c/pre\u003e\n\n\u003ch2\u003eStart the websockets with Pusher in the production mode (Optional)\u003c/h2\u003e\n\u003cpre\u003e\u003ccode\u003e1. In your \u003ca href=\"https://pusher.com/\" target=\"_blank\"\u003ePusher account\u003c/a\u003e create a channel called: \u003cstrong\u003ejuegos-api\u003c/strong\u003e\u003c/code\u003e\u003c/pre\u003e\n\u003cpre\u003e\u003ccode\u003e2. Enter the file: \u003cstrong\u003eproduction.env\u003c/strong\u003e\u003c/code\u003e\u003c/pre\u003e\n\u003cpre\u003e\u003ccode\u003e3. fill in the following credentials:\n\u003cbr\u003e\u003cstrong\u003ePUSHER_APP_KEY=\u003c/strong\u003e{App Keys in the channel juegos-api key}\n\u003cbr\u003e\u003cstrong\u003ePUSHER_APP_CLUSTER=\u003c/strong\u003e{App Keys in the channel juegos-api cluster}\n\u003c/code\u003e\u003c/pre\u003e\n\n\u003ch2\u003eStart Jest unit tests\u003c/h2\u003e\n\u003cpre\u003e\u003ccode\u003e$ yarn \u0026\u0026 [ yarn test:unit || quasar test --unit jest ]\u003c/code\u003e\u003c/pre\u003e\n\n\u003ch2\u003eStart Cypress end to end tests\u003c/h2\u003e\n\u003cpre\u003e\u003ccode\u003e$ yarn \u0026\u0026 yarn cypress:open\u003c/code\u003e\u003c/pre\u003e\n\n\u003chr\u003e\n\n\u003ch3\u003eShow get all registries API SERVER:\u003c/h3\u003e\n\u003cp align=\"center\"\u003e\u003cimg src=\"public/capturas/captura1.png\"\u003e\u003c/p\u003e\n\n\u003ch3\u003eLogin form:\u003c/h3\u003e\n\u003cp align=\"center\"\u003e\u003cimg src=\"public/capturas/captura2.png\"\u003e\u003c/p\u003e\n\n\u003ch3\u003eCreate or update registrer sending it to the API SERVER:\u003c/h3\u003e\n\u003cp align=\"center\"\u003e\u003cimg src=\"public/capturas/captura3.png\"\u003e\u003c/p\u003e\n\n\u003ch3\u003eApplication web responsive:\u003c/h3\u003e\n\u003cp align=\"center\"\u003e\u003cimg src=\"public/capturas/captura4.png\"\u003e\u003c/p\u003e\n\n\u003ch2\u003eDeploy to Docker \u003cg-emoji class=\"g-emoji\" alias=\"whale\" fallback-src=\"https://github.githubassets.com/images/icons/emoji/unicode/1f433.png\"\u003e🐳\u003c/g-emoji\u003e\u003c/h2\u003e\n\n\u003ch4\u003eSetup:\u003c/h4\u003e\n\u003cpre\u003e\n\u003ccode\u003e$ git clone https://github.com/JAVI-CC/VUE3-API-client.git\n$ cd VUE3-API-client\n$ cd VUE3-API-client\n$ cp development.env.example development.env\n$ cp production.env.example production.env\n$ docker-compose up -d\u003c/code\u003e\n\u003c/pre\u003e\n\n\u003ch4\u003eRunning mode dev:\u003c/h4\u003e\n\u003cpre\u003e\n\u003ccode\u003e$ docker compose up\u003c/code\u003e\n\u003c/pre\u003e\n\n\u003ch4\u003eRunning mode build:\u003c/h4\u003e\n\u003cpre\u003e\n\u003ccode\u003e$ docker compose up -d\u003c/code\u003e\n\u003ccode\u003e$ docker compose exec app quasar build -m pwa\u003c/code\u003e\n\u003c/pre\u003e\n\n\u003ch4\u003eRunning mode prod:\u003c/h4\u003e\n\u003cspan\u003eIt is about creating a new container that contains the application once the build is done on the nginx web server listening on port \u003ccode\u003e:85-\u003e80/tcp\u003c/code\u003e\n\u003c/span\u003e\n\u003cdiv class=\"highlight highlight-source-shell\"\u003e\u003cpre\u003e├── vue-quasar-crud-template-app-prod\n\u003c/pre\u003e\u003c/div\u003e\u003cpre\u003e\n\u003ccode\u003e$ docker compose -f docker-compose.prod.yml up -d\u003c/code\u003e\n\u003c/pre\u003e\n\n\u003cbr\u003e\n\n\u003cp\u003eIn case you are using your IDE to develop the application and it does not detect the files it contains within the \u003cstrong\u003enode_modules folder\u003c/strong\u003e, you have to copy the files from the node_modules folder of the container to the host machine with the following command.\u003c/p\u003e\n\u003cpre\u003e\n\u003ccode\u003e$ docker compose cp app:/src/node_modules .\u003c/code\u003e\n\u003c/pre\u003e\n\n\u003cspan\u003eOnce you have the containers deployed, you can access the APP at \u003c/span\u003e \u003ca href=\"http://localhost:9000\" target=\"_blank\"\u003ehttp://localhost:9000\u003c/a\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjavi-cc%2Fvue3-api-client","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjavi-cc%2Fvue3-api-client","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjavi-cc%2Fvue3-api-client/lists"}