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: admin@email.com
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