Registry / web-framework / vue-async-computed

vue-async-computed

library4.0.1jsnpmunverified

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.

web-framework

npm install vue-async-computed

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-ASYNC-COMPUTED

vue-async-computed

web-frameworkjavascriptv4.0.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

AsyncComputed

✓ import AsyncComputed from 'vue-async-computed'

✗ const AsyncComputed = require('vue-async-computed')

The library primarily exports a default plugin object for `app.use()`.

createApp

✓ import { createApp } from 'vue'

✗ import Vue from 'vue'

Used with `createApp` for Vue 3 applications, as `vue-async-computed` is a Vue 3 plugin.

Async computed property

✓ async someCalculation() { /* ... */ }

✗ someCalculation: () => { /* ... */ }

Async computed properties are defined as methods within the `asyncComputed` option, returning a Promise.

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.

import { createApp } from 'vue' import App from './App.vue' import AsyncComputed from 'vue-async-computed' const app = createApp(App) app.use(AsyncComputed) // Example component usage: app.component('MyAsyncComponent', { template: ` <div> <p>User ID: {{ userId }}</p> <p>Username: {{ username === null ? 'Loading...' : username }}</p> <button @click="userId++">Next User</button> </div> `, data () { return { userId: 1 } }, asyncComputed: { async username () { // Simulate an API call await new Promise(resolve => setTimeout(resolve, 500)) const response = await fetch(`https://jsonplaceholder.typicode.com/users/${this.userId}`) const user = await response.json() return user.name || `User ${this.userId} Not Found` } } }) app.mount('#app')

Debug

Known issues

breakingIn `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`.

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.

affects: >=3.0.0

gotchaAsynchronous computed properties initially resolve to `null` until their underlying promise settles. This means your templates and logic must account for this initial `null` state.

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.

affects: >=1.0.0

gotchaUsing 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.

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.

affects: >=1.0.0

Errors

Common errors & fixes

Error in render: 'TypeError: Cannot read properties of undefined (reading 'then')' or 'TypeError: username.then is not a function'

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.

fix

Move the `async` function or Promise-returning function from the `computed` option to the `asyncComputed` option.

TypeError: Cannot read properties of null (reading 'someProperty')

Attempting to access a property or method on an async computed property before its initial promise has resolved, when the property is still `null`.

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.

Upgrade

Version history

4.0.1latest on npm

Audit

Dependencies

vuerequiredPeer dependency for Vue 3 integration.

Agent activity

7 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/foxbenjaminfox/vue-async-computed ↗

packagehttps://www.npmjs.com/package/vue-async-computed ↗