Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/javi-cc/vue3-api-client

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
https://github.com/javi-cc/vue3-api-client

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

Last synced: 6 days ago
JSON representation

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

Awesome Lists containing this project

README 

        



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



Application 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:



    

  • I use the Vue3 version with the composition API.
    • 

  • Style development with Quasar Framework.
    • 

  • VUEX.
    • 

  • AXIOS.
    • 

  • Keep-alive.
    • 

  • Vue-router.
    • 

  • PWA (Progressive Web Apps).
    • 

  • SPA (Single Page Application).
    • 

  • Application exported in APK using Apache Cordova.
    • 

  • Application exported in APK using Capacitor.
    • 

  • Electron.
    • 

  • The project contains the files to implement it in Docker.
    • 

  • Vue-validate.
    • 

  • Helpers.
    • 

  • Watchers.
    • 

  • Props.
    • 

  • Slots.
    • 

  • Emits.
    • 

  • Websockets with Pusher.
    • 

  • End to end tests with CYPRESS.
    • 

  • Unit tests with JEST.
    • 

  • The application is connected to a games API made in Laravel: https://github.com/JAVI-CC/Laravel-API-Server

    • 




Demo


https://vue-api-client.vercel.app


User: [email protected]


Password: 12345678



Start the app in the development mode


$ yarn && quasar dev -m pwa



Start the app in the production mode


$ yarn && quasar build -m pwa



Export the app in APK apache cordova in the development mode


$ yarn && quasar dev -m cordova -T android



Export the app in APK apache cordova in the production mode


$ yarn && quasar build -m cordova -T android



Export the app in APK capactior in the production mode


$ yarn && quasar build -m capacitor -T android -d



Start the app in the electron mode


$ yarn && quasar dev -m electron



Export the app in EXE electron in the production mode


$ yarn && quasar build -m electron



Start the websockets with Pusher in the development mode (Optional)


1. In your Pusher account create a channel called: juegos-api


2. Enter the file: development.env


3. fill in the following credentials:


PUSHER_APP_KEY={App Keys in the channel juegos-api key}


PUSHER_APP_CLUSTER={App Keys in the channel juegos-api cluster}




Start the websockets with Pusher in the production mode (Optional)


1. In your Pusher account create a channel called: juegos-api


2. Enter the file: production.env


3. fill in the following credentials:


PUSHER_APP_KEY={App Keys in the channel juegos-api key}


PUSHER_APP_CLUSTER={App Keys in the channel juegos-api cluster}




Start Jest unit tests


$ yarn && [ yarn test:unit || quasar test --unit jest ]



Start Cypress end to end tests


$ yarn && yarn cypress:open






Show get all registries API SERVER:





Login form:





Create or update registrer sending it to the API SERVER:





Application web responsive:





Deploy to Docker 🐳



Setup:



$ git clone https://github.com/JAVI-CC/VUE3-API-client.git

$ cd VUE3-API-client

$ cd VUE3-API-client

$ cp development.env.example development.env

$ cp production.env.example production.env

$ docker-compose up -d




Running mode dev:



$ docker compose up




Running mode build:



$ docker compose up -d

$ docker compose exec app quasar build -m pwa




Running mode prod:


It is about creating a new container that contains the application once the build is done on the nginx web server listening on port :85->80/tcp



├── vue-quasar-crud-template-app-prod


$ docker compose -f docker-compose.prod.yml up -d








In case you are using your IDE to develop the application and it does not detect the files it contains within the node_modules folder, you have to copy the files from the node_modules folder of the container to the host machine with the following command.



$ docker compose cp app:/src/node_modules .




Once you have the containers deployed, you can access the APP at  http://localhost:9000