{"id":20111943,"url":"https://github.com/polarisation/vue-computed-promise","last_synced_at":"2025-06-19T07:03:44.375Z","repository":{"id":57395353,"uuid":"85566392","full_name":"Polarisation/vue-computed-promise","owner":"Polarisation","description":"Plugin for Vue.js, allows promises to be returned for computed properties","archived":false,"fork":false,"pushed_at":"2019-10-15T09:39:13.000Z","size":13,"stargazers_count":2,"open_issues_count":2,"forks_count":2,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-10-10T20:12:31.203Z","etag":null,"topics":["vuejs2"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/Polarisation.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-03-20T10:56:45.000Z","updated_at":"2019-10-15T09:39:15.000Z","dependencies_parsed_at":"2022-09-04T20:22:52.574Z","dependency_job_id":null,"html_url":"https://github.com/Polarisation/vue-computed-promise","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Polarisation%2Fvue-computed-promise","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Polarisation%2Fvue-computed-promise/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Polarisation%2Fvue-computed-promise/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Polarisation%2Fvue-computed-promise/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Polarisation","download_url":"https://codeload.github.com/Polarisation/vue-computed-promise/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224500020,"owners_count":17321619,"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":["vuejs2"],"created_at":"2024-11-13T18:18:17.101Z","updated_at":"2024-11-13T18:18:17.836Z","avatar_url":"https://github.com/Polarisation.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-computed-promise\nPlugin for Vue.js, allows promises to be returned for computed properties\n\n**Note:** you may prefer to use the more popular [https://github.com/foxbenjaminfox/vue-async-computed](https://github.com/foxbenjaminfox/vue-async-computed). At the time I wrote this plugin, **vue-async-computed** was not sufficient for my needs but since lazy-loading was added it would be. Now the differences are mostly of style - this plugin may be preferred if you want to use computed promises in a more seemless way (using the standard 'computed' key), but there is some risk of conflicts with other plugins. In contrast, **vue-async-computed** is less likely to conflict with plugins because it introduces a new 'asyncComputed' key.\n\n[![NPM](https://nodei.co/npm/vue-computed-promise.png?downloads=true\u0026downloadRank=true\u0026stars=true)](https://nodei.co/npm/vue-computed-promise/)\n\n\n## Install\n\n```\n$ npm install vue-computed-promise\n```\n\n## Usage\n\nAdd the plugin:\n\n```\nconst VueComputedPromise = require('vue-computed-promise'); // alternatively use script tag\nVue.use(VueComputedPromise);\n```\n\nNow you can return a Promise from a computed property:\n\n```\nvar vue = new Vue({\n  el: \"#app\",\n  data: {\n    one: 1,\n    two: 2\n  },\n  computed: {\n    oneplustwo: function() {\n      var _one = this.$data.one;\n      var _two = this.$data.two;\n      return new Promise(function(resolve, reject) {\n        setTimeout(0, function() {\n          resolve(_one + _two);\n        });\n      });\n    }\n  }\n})\n```\n\nUntil the Promise resolves, the value of `null` is returned by the computed property.\n\nIn the example above `oneplustwo` is never re-computed. The Promise will only be called once (or never if the property is not used in the template).\n\nTo return a Promise which may be re-computed when reactive dependencies change, you will need to return a parameter-less function which in turn returns a Promise:\n\n```\nvar vue = new Vue({\n  el: \"#app\",\n  data: {\n    a: 1,\n    b: 2,\n    calculating: false,\n    count: 0\n  },\n  computed: {\n    result: function() {\n      // these properties are reactive dependencies\n      var _a = Number(this.a);\n      var _b = Number(this.b);\n\n      return () =\u003e {\n        // properties only accessed within this function are not reactive dependencies\n        var data = this.$data;\n        data.calculating = true;\n\n        return new Promise(function(resolve, reject) {\n          setTimeout(function() {\n            resolve(_a + _b);\n            data.calculating = false;\n            data.count++;\n          }, 1000);\n        });\n      };\n    }\n  }\n})\n```\n\nAs the example shows, you also have control over which properties become dependencies: only properties accessed outside of the returned function will become dependencies.\n\n## Contributions\n\nI've only used this for a limited use case - but I'm happy to take pull requests to improve the plugin.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpolarisation%2Fvue-computed-promise","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpolarisation%2Fvue-computed-promise","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpolarisation%2Fvue-computed-promise/lists"}