{"id":19265386,"url":"https://github.com/matrunchyk/vue-oop","last_synced_at":"2025-08-22T14:04:56.145Z","repository":{"id":40763603,"uuid":"211800313","full_name":"matrunchyk/vue-oop","owner":"matrunchyk","description":"Vue OOP: Universal library which helps to build OOP-driven models for GraphQL and RESTful API for Vue components. Influenced by Laravel Eloquent Models \u0026 Collections.","archived":false,"fork":false,"pushed_at":"2025-03-17T07:19:38.000Z","size":7044,"stargazers_count":16,"open_issues_count":22,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-17T19:33:51.647Z","etag":null,"topics":["graphql","ioc","ioc-container","laravel-eloquent-models","model","oop","oop-concepts","oop-driven-models","orm","repository","rest","schema","vue","vue-oop","vue3"],"latest_commit_sha":null,"homepage":"https://matrunchyk.github.io/vue-oop/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/matrunchyk.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-09-30T07:22:51.000Z","updated_at":"2024-05-03T08:13:08.000Z","dependencies_parsed_at":"2023-02-15T11:46:40.956Z","dependency_job_id":"4bc0fc5f-4ca2-4c0e-97b5-8896fce3c359","html_url":"https://github.com/matrunchyk/vue-oop","commit_stats":{"total_commits":215,"total_committers":12,"mean_commits":"17.916666666666668","dds":0.655813953488372,"last_synced_commit":"1be7e6b5e7aeb5d949f4d726b1c9d211a0ea1945"},"previous_names":[],"tags_count":63,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matrunchyk%2Fvue-oop","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matrunchyk%2Fvue-oop/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matrunchyk%2Fvue-oop/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matrunchyk%2Fvue-oop/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/matrunchyk","download_url":"https://codeload.github.com/matrunchyk/vue-oop/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249906752,"owners_count":21343499,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["graphql","ioc","ioc-container","laravel-eloquent-models","model","oop","oop-concepts","oop-driven-models","orm","repository","rest","schema","vue","vue-oop","vue3"],"created_at":"2024-11-09T19:45:51.172Z","updated_at":"2025-04-21T19:31:25.543Z","avatar_url":"https://github.com/matrunchyk.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vue OOP\n\nUniversal library which helps to build OOP-driven models for GraphQL and RESTful API for Vue components.\nInfluenced by Laravel Eloquent Models \u0026 Collections.\n\n[![npm](https://img.shields.io/npm/v/vue-oop.svg)](https://www.npmjs.com/package/vue-oop) [![GitHub stars](https://img.shields.io/github/stars/matrunchyk/vue-oop.svg)](https://github.com/matrunchyk/vue-oop/stargazers)\n![Travis](https://api.travis-ci.org/matrunchyk/vue-oop.svg?branch=master) [![codecov](https://codecov.io/gh/matrunchyk/vue-oop/branch/master/graph/badge.svg)](https://codecov.io/gh/matrunchyk/vue-oop) [![GitHub license](https://img.shields.io/github/license/matrunchyk/vue-oop.svg)](https://github.com/matrunchyk/vue-oop/blob/master/LICENSE) \n\n_Note. If you looking for v1 of this library, switch to a [relevant branch](https://github.com/digitalideastudio/vue-graphql-models/tree/v1)._ \n\n\n## Features\n\n* `Model` is a class which acts as a base entity for your models extending this class.\n* `Repository` is a class which manages Model collections (retrieval one or many)\n* `Registry` is a Registry storage\n* `Collection` is a Proxy based on collect.js package.\n* Full encapsulation of GraphQL queries \u0026 mutations. No need to call them manually, all you need is to call you Model's methods.\n* All arrays retrieved from GraphQL will be hydrated with respectful collections of models.\n* Supports lazy-loading of GraphQL documents.\n* Supports events \u0026 hooks for customization.\n\n###### Internally:  \n* TypeScript 3.9.\n* Collect.JS.\n* Apollo (if GraphQL activated).\n\n## Installation\n\n`npm i vue-oop -S`\n\nor\n\n`yarn add vue-oop`\n\n## Configuration for GraphQL:\n\n```\n// Import the library itself\nimport VueOOP from 'vue-oop';\n\n// Install the plugin\nVue.use(VueOOP, {\n  graphql: true,\n  schemaUrl: 'http://127.0.0.1:3000/graphql',\n});\n```\n\n## Configuration for REST:\n\n```\n// Import the library itself\nimport VueOOP from 'vue-oop';\n\n// Install the plugin\nVue.use(VueOOP);\n```\n\n## Documentation\n\n### Basic Usage\n#### Step 1. Define your model:\n\n```\n// @/models/Client.js\nimport { Model } from 'vue-oop';\n\nexport default class Client extends Model {\n  name = 'John';\n  email = 'john@doe.com';\n}\n```\n\n#### Step 2. Define your repository:\n```\n// @/repositories/ClientRepository.js\nimport { Repository } from 'vue-oop';\nimport Client from '@/models/Client';\n\nexport default class ClientRepository extends Repository {\n  model = Client;\n  \n  // For REST\n  // queryMany = '/api/v1/clients';\n\n  // For GraphQL\n  // queryMany: () =\u003e import('@/gql/clients/queries/fetchClients.gql');\n}\n```\n\n#### Step 3. Use it in your component:\n\n##### JavaScript\n```\n\u003ctemplate\u003e\n   \u003cul\u003e\n     \u003cli v-if=\"clients.loading\"\u003eLoading...\u003c/li\u003e\n     \u003cli v-else-if=\"clients.error\"\u003eLoading Failed! Reason: {{ clients.lastError.message }}\u003c/li\u003e\n     \u003cli v-else v-for=\"(client, index) in clients.dataset.all()\" :key=\"index\"\u003e\n       \u003cp\u003eName: {{ client.name }}\u003c/p\u003e\n       \u003cp\u003eEmail: {{ client.email }}\u003c/p\u003e\n     \u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport ClientRepository from '@/repositories/ClientRepository';\n\nexport default {\n  data: () =\u003e ({\n    clients: new ClientRepository(),\n  }),\n\n  created() {\n    this.clients.many();\n  },\n}\n\u003c/script\u003e\n```\n\n##### TypeScript\n```\n\u003ctemplate\u003e\n   \u003cul\u003e\n     \u003cli v-if=\"clients.loading\"\u003eLoading...\u003c/li\u003e\n     \u003cli v-else-if=\"clients.error\"\u003eLoading Failed! Reason: {{ clients.lastError.message }}\u003c/li\u003e\n     \u003cli v-else v-for=\"(client, index) in clients.dataset.all()\" :key=\"index\"\u003e\n       \u003cp\u003eName: {{ client.name }}\u003c/p\u003e\n       \u003cp\u003eEmail: {{ client.email }}\u003c/p\u003e\n     \u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/template\u003e\n\n\u003cscript lang=\"ts\"\u003e\nimport Vue from 'vue';\nimport Component from 'vue-class-component';\nimport ClientRepository from '@/repositories/ClientRepository';\n\n@Component\nexport default class ClientsPage extends Vue {\n  clients = new ClientRepository(),\n\n  created() {\n    this.clients.many();\n  }\n}\n\u003c/script\u003e\n```\n\n### Advanced Usage\n\n#### Dynamic Repository Query Params\n\nSometimes 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).\n\nTo achieve this, you can use the following syntax:\n\n```\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cbutton v-if=\"userId\" @click=\"repository.many()\"\u003eFetch\u003c/button\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n// ...\ndata: () =\u003e ({\n  repository: new MyRepository(),\n}),\n\nwatch: {\n  userId(id) {\n    this.repository.queryParams = { id };\n  },\n},\n// ...\n\u003c/script\u003e\n```\n\nNow when the `userId` variable changed, the `queryParams` are also updated and ready to be called.\n\n\n## Contribution\n\nFeel free to submit your pull-requests, ideas, proposals and bug reports!\n \n### Coming in a next major releases:\n- Add dynamic query builder \u0026 fields\n  - Add default fields to fetch with an ability to customize\n- Add decorators\n  - `@OneToMany`, `@ManyToMany`, `@ManyToOne`, `@OneToOne` relations between models\n  - `@Field` with `castTo`, `castFrom`, `nullable` options\n- Add subscriptions \u0026 events example\n- Add cursor-based pagination\n- Write more tests \u0026 coverage support\n- Add scaffolding support\n- Publishing as monorepo with `vue-oop-table`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmatrunchyk%2Fvue-oop","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmatrunchyk%2Fvue-oop","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmatrunchyk%2Fvue-oop/lists"}