{"id":14263,"library":"vue-async-computed","title":"Vue Async Computed Properties","description":"vue-async-computed is a lightweight plugin for Vue 3 that seamlessly integrates asynchronous operations into Vue's reactive system through a dedicated `asyncComputed` option. It allows developers to define computed properties that return Promises, effectively enabling the use of `async/await` syntax for computations that depend on asynchronous data fetching or complex, time-consuming operations. The current stable version is 4.0.1. This library addresses the inherent limitation of standard `computed` properties, which are synchronous, by providing a declarative way to manage asynchronous state, including automatic re-computation when dependencies change and handling the initial `null` state until the promise resolves. Its primary differentiator is the direct integration into the Vue instance/component options, offering a cleaner syntax compared to manual `watch` or `mounted` based async data handling.","status":"active","version":"4.0.1","language":"javascript","source_language":"en","source_url":"https://github.com/foxbenjaminfox/vue-async-computed","tags":["javascript","vue","data","async","computed","computed data","typescript"],"install":[{"cmd":"npm install vue-async-computed","lang":"bash","label":"npm"},{"cmd":"yarn add vue-async-computed","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-async-computed","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for Vue 3 integration.","package":"vue","optional":false}],"imports":[{"note":"The library primarily exports a default plugin object for `app.use()`.","wrong":"const AsyncComputed = require('vue-async-computed')","symbol":"AsyncComputed","correct":"import AsyncComputed from 'vue-async-computed'"},{"note":"Used with `createApp` for Vue 3 applications, as `vue-async-computed` is a Vue 3 plugin.","wrong":"import Vue from 'vue'","symbol":"createApp","correct":"import { createApp } from 'vue'"},{"note":"Async computed properties are defined as methods within the `asyncComputed` option, returning a Promise.","wrong":"someCalculation: () => { /* ... */ }","symbol":"Async computed property","correct":"async someCalculation() { /* ... */ }"}],"quickstart":{"code":"import { createApp } from 'vue'\nimport App from './App.vue'\nimport AsyncComputed from 'vue-async-computed'\n\nconst app = createApp(App)\napp.use(AsyncComputed)\n\n// Example component usage:\napp.component('MyAsyncComponent', {\n  template: `\n    <div>\n      <p>User ID: {{ userId }}</p>\n      <p>Username: {{ username === null ? 'Loading...' : username }}</p>\n      <button @click=\"userId++\">Next User</button>\n    </div>\n  `,\n  data () {\n    return {\n      userId: 1\n    }\n  },\n  asyncComputed: {\n    async username () {\n      // Simulate an API call\n      await new Promise(resolve => setTimeout(resolve, 500))\n      const response = await fetch(`https://jsonplaceholder.typicode.com/users/${this.userId}`)\n      const user = await response.json()\n      return user.name || `User ${this.userId} Not Found`\n    }\n  }\n})\n\napp.mount('#app')","lang":"typescript","description":"This example demonstrates how to install `vue-async-computed` and define an asynchronous computed property (`username`) that fetches data from an API based on a reactive `userId`. It showcases the loading state and automatic re-computation."},"warnings":[{"fix":"Ensure that any logic depending on the initial default value of an async computed property is placed within or after the `created` lifecycle hook. Avoid accessing it in `data` or `setup` if an immediate non-null value is expected.","message":"In `v3.0.0` and later, if you define a default value for an async computed property, it will not be available until the `created` callback. Relying on this value in `data` or earlier lifecycle hooks will result in `undefined` or `null`.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Use conditional rendering (`v-if`, `v-else`) or provide fallback text (`{{ myAsyncValue === null ? 'Loading...' : myAsyncValue }}`) in your templates. Implement null checks in your JavaScript logic before operating on the value.","message":"Asynchronous computed properties initially resolve to `null` until their underlying promise settles. This means your templates and logic must account for this initial `null` state.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Always use the `asyncComputed` option provided by this plugin for properties that perform asynchronous operations or return Promises. Reserve the `computed` option for synchronous, immediate calculations.","message":"Using standard `computed` properties with `async` functions or functions returning Promises will not work as expected with Vue's reactivity system; the computed property will hold the Promise object itself, not its resolved value.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"search_vec":"'3':15 '4.0.1':67 'address':70 'allow':32 'async':2,7,131,137 'async/await':46 'asynccomput':29 'asynchron':19,53,88 'automat':91 'base':130 'chang':97 'cleaner':122 'compar':124 'complex':57 'comput':3,8,36,49,76,94,138,139 'consum':60 'current':63 'data':54,132,136,140 'declar':84 'dedic':28 'defin':35 'depend':51,96 'develop':33 'differenti':110 'direct':113 'effect':41 'enabl':42 'fetch':55 'handl':99,133 'includ':90 'inher':72 'initi':101 'instance/component':118 'integr':18,114 'javascript':134 'librari':69 'lightweight':11 'limit':73 'manag':87 'manual':126 'mount':129 'null':102 'offer':120 'oper':20,61 'option':30,119 'plugin':12 'primari':109 'promis':40,106 'properti':4,37,77 'provid':82 're':93 're-comput':92 'reactiv':24 'resolv':107 'return':39 'seamless':17 'stabl':64 'standard':75 'state':89,103 'synchron':80 'syntax':47,123 'system':25 'time':59 'time-consum':58 'typescript':141 'use':44 'version':65 'vue':1,6,14,22,117,135 'vue-async-comput':5 'watch':127 'way':85","created_at":"2026-04-20T01:58:47.894212+00:00","updated_at":"2026-04-20T01:58:47.894212+00:00","problems":[{"fix":"Move the `async` function or Promise-returning function from the `computed` option to the `asyncComputed` option.","cause":"Attempting to use an `async` function directly in the standard `computed` option instead of `asyncComputed`. Vue's synchronous `computed` property then holds the Promise object itself, not its resolved value, and `then` is called on the value `undefined` or on the Promise object unexpectedly.","error":"Error in render: 'TypeError: Cannot read properties of undefined (reading 'then')' or 'TypeError: username.then is not a function'"},{"fix":"Add null checks (`v-if=\"myAsyncProp\"` in template, or `if (this.myAsyncProp) { ... }` in script) before attempting to use the value of an async computed property.","cause":"Attempting to access a property or method on an async computed property before its initial promise has resolved, when the property is still `null`.","error":"TypeError: Cannot read properties of null (reading 'someProperty')"}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/foxbenjaminfox/vue-async-computed","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/vue-async-computed","openapi_spec":null,"status_page":null,"smithery":null,"categories":["web-framework"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-18","install_tag":null}}