Vue OOP

Vue OOP: Universal library which helps to build OOP-driven models for GraphQL and RESTful API for Vue components. Influenced by Laravel Eloquent Models & Collections.

Vue OOP

Universal library which helps to build OOP-driven models for GraphQL and RESTful API for Vue components. Influenced by Laravel Eloquent Models & Collections.

npm GitHub stars Travis codecov GitHub license

Note. If you looking for v1 of this library, switch to a relevant branch.

Features

Internally:

Installation

npm i vue-oop -S

or

yarn add vue-oop

Configuration for GraphQL:

// Import the library itself
import VueOOP from 'vue-oop';

// Install the plugin
Vue.use(VueOOP, {
  graphql: true,
  schemaUrl: 'http://127.0.0.1:3000/graphql',
});

Configuration for REST:

// Import the library itself
import VueOOP from 'vue-oop';

// Install the plugin
Vue.use(VueOOP);

Documentation

Basic Usage

Step 1. Define your model:

// @/models/Client.js
import { Model } from 'vue-oop';

export default class Client extends Model {
  name = 'John';
  email = 'john@doe.com';
}

Step 2. Define your repository:

// @/repositories/ClientRepository.js
import { Repository } from 'vue-oop';
import Client from '@/models/Client';

export default class ClientRepository extends Repository {
  model = Client;
  
  // For REST
  // queryMany = '/api/v1/clients';

  // For GraphQL
  // queryMany: () => import('@/gql/clients/queries/fetchClients.gql');
}

Step 3. Use it in your component:

JavaScript
<template>
   <ul>
     <li v-if="clients.loading">Loading...</li>
     <li v-else-if="clients.error">Loading Failed! Reason: </li>
     <li v-else v-for="(client, index) in clients.dataset.all()" :key="index">
       <p>Name: </p>
       <p>Email: </p>
     </li>
  </ul>
</template>

<script>
import ClientRepository from '@/repositories/ClientRepository';

export default {
  data: () => ({
    clients: new ClientRepository(),
  }),

  created() {
    this.clients.many();
  },
}
</script>
TypeScript
<template>
   <ul>
     <li v-if="clients.loading">Loading...</li>
     <li v-else-if="clients.error">Loading Failed! Reason: </li>
     <li v-else v-for="(client, index) in clients.dataset.all()" :key="index">
       <p>Name: </p>
       <p>Email: </p>
     </li>
  </ul>
</template>

<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import ClientRepository from '@/repositories/ClientRepository';

@Component
export default class ClientsPage extends Vue {
  clients = new ClientRepository(),

  created() {
    this.clients.many();
  }
}
</script>

Advanced Usage

Dynamic Repository Query Params

Sometimes we need to be able to pass params NOT in .many() or .one(). It happens, for example, when .many() is called not by you (i.e. 3rd party library or just other component).

To achieve this, you can use the following syntax:

<template>
  <div>
    <button v-if="userId" @click="repository.many()">Fetch</button>
  </div>
</template>

<script>
// ...
data: () => ({
  repository: new MyRepository(),
}),

watch: {
  userId(id) {
    this.repository.queryParams = { id };
  },
},
// ...
</script>

Now when the userId variable changed, the queryParams are also updated and ready to be called.

Contribution

Feel free to submit your pull-requests, ideas, proposals and bug reports!

Coming in a next major releases: