{"id":20245169,"url":"https://github.com/simulatedgreg/vue-horizon","last_synced_at":"2025-07-26T05:07:56.787Z","repository":{"id":57396197,"uuid":"70891065","full_name":"SimulatedGREG/vue-horizon","owner":"SimulatedGREG","description":"The vue plugin that wraps @horizon/client APIs to the Vue object and more.","archived":false,"fork":false,"pushed_at":"2016-10-18T05:34:08.000Z","size":281,"stargazers_count":10,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-10T08:09:21.503Z","etag":null,"topics":["horizion","vue"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SimulatedGREG.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-10-14T08:40:22.000Z","updated_at":"2017-10-27T11:51:56.000Z","dependencies_parsed_at":"2022-09-18T12:10:53.110Z","dependency_job_id":null,"html_url":"https://github.com/SimulatedGREG/vue-horizon","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimulatedGREG%2Fvue-horizon","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimulatedGREG%2Fvue-horizon/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimulatedGREG%2Fvue-horizon/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimulatedGREG%2Fvue-horizon/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SimulatedGREG","download_url":"https://codeload.github.com/SimulatedGREG/vue-horizon/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248296492,"owners_count":21080301,"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":["horizion","vue"],"created_at":"2024-11-14T09:19:20.166Z","updated_at":"2025-04-10T20:51:06.950Z","avatar_url":"https://github.com/SimulatedGREG.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-horizon\n\n\u003e The vue plugin that wraps @horizon/client APIs to the Vue object and more.\n\n[![js-standard-style](https://cdn.rawgit.com/feross/standard/master/badge.svg)](https://github.com/feross/standard)\n\n## Installing\nInstall using NPM\n```bash\nnpm install vue-horizon --save\n``` \nThen import using webpack or browserify\n\n**main.js**\n```js\nimport Vue from 'vue'\nimport VueHorizon from 'vue-horizon'\n\nVue.use(VueHorizon, { host: '127.0.0.1:8181' })\n```\n*The use of a module loader is required in order to pass the needed Horizon contructor arguments.*\n\n### Usage\nWhen installing `vue-horizon` through the use of `Vue.use()`, make sure to pass a second argument that contains the [Horizon contructor arguments](http://horizon.io/api/horizon/#constructor). Note that these arguments are used directly with `new Horizon()`. Since we are using the `@horizon/client` module, **we must** at minimum specify the `host` of our Horizon server.\n\n### `this.$horizon`\nOnce installed, all `@horizon/client` APIs are exposed through `this.$horizon`.\n\n### Binding Horizon Models\n`vue-horizon` provides a convenience method to easily bind models to the Vue object so that they can be used throughout the entire component tree. The primary advantage of doing this is to limit the amount of connections to the horizon server by letting the plugin set up the references in a one-shot manner. This method is recommened for smaller sized applications. Larger apps should maybe ignore this feature as models should be tied together with `vuex`.\n\n#### Use Case\nLet's say we know our database has the models `messages` and `members`, and we also know we want to access them on multiple occasions within multiple components. Let's bind items to the Vue object.\n\nWithin the Horizon contructor arguements let's pass in an array of string models and let the plugin do the rest...\n\n**main.js**\n```js\n  Vue.use(VueHorizon, {\n    host: '127.0.0.1:8181',\n    models: ['messages', 'members']\n  })\n```\n\nNow both the `messages` and `members` models are available via **`this.$$messages`** and **`this.$$members`**. Let's use one!\n\n**Messages.vue**\n```html\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003ch1\u003eMessages\u003c/h1\u003e\n    \u003cdiv v-for=\"msg in msgs\"\u003e\n      {{ msg.text }}\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  export default {\n    created () {\n      this.$$messages.watch()\n        .subscribe(\n          docs =\u003e {\n            this.msgs = docs\n          }\n        )\n    },\n    data () {\n      return {\n      \tmsgs: []\n      }\n    }\n  }\n\u003c/script\u003e\n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimulatedgreg%2Fvue-horizon","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsimulatedgreg%2Fvue-horizon","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimulatedgreg%2Fvue-horizon/lists"}