The vue3-api-client from javi-cc

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

javi-cc / vue3-api-client Goto Github PK

vue3-api-client's Introduction