Example of API with Vue.js in Melcus/parking-system

File store/garages.js (link to Github)
//
export default {
  state,
  mutations: {
    SET_GARAGES(state, garages) {
      state.all = garages
    }
  },
  actions: {
    async ENSURE({commit}) {
      const {data} = await this.$axios.$get(`${process.env.API_URL}/garages`)
      commit('SET_GARAGES', data)
    }
  },
  getters: {
    ...getters
  }
}
File routes/api.php (link to Github)
use App\Http\Controllers\Api\GarageController;
use Illuminate\Support\Facades\Route;

//
Route::middleware(['internal'])->group(function () {
    Route::get('garages', [GarageController::class, 'index']);
    //
});
File app/Http/Controllers/Api/GarageController.php (link to Github)
use App\Http\Controllers\Controller;
use App\Http\Resources\GarageIndexResourceCollection;
use App\Models\Garage;
use Illuminate\Database\Eloquent\Builder;
use Illuminate\Http\Request;

class GarageController extends Controller
{
    public function index(Request $request) : GarageIndexResourceCollection
    {
        return new GarageIndexResourceCollection(
            Garage::withCount([
                'spots as total_spots',
                'spots as free_spots' => function(Builder $query) {
                    $query->whereDoesntHave('reservations', function(Builder $query) {
                        $query->whereRaw("? BETWEEN start AND end", [now()]);
                    });
                }
            ])->get()
        );
    }
    //
}
File app/Http/Resources/GarageIndexResourceCollection.php (link to Github)
use Illuminate\Http\Request;
use Illuminate\Http\Resources\Json\ResourceCollection;

class GarageIndexResourceCollection extends ResourceCollection
{
    public function toArray($request)
    {
        return parent::toArray($request);
    }
}

Additional resources on API with Vue.js: