Registry / web-framework / vue-async-computed-decorator

vue-async-computed-decorator

library0.0.5jsnpmunverified

The `vue-async-computed-decorator` package provides a decorator (`@AsyncComputed`) that integrates `vue-async-computed` functionality into Vue 2 components written with `vue-class-component`. This allows class-style Vue 2 components to define properties that resolve asynchronously, typically fetching data, and automatically react to their dependencies, similar to standard computed properties. The package is at a very early pre-release version (0.0.5) and has seen no updates in over six years. It is designed exclusively for Vue 2 environments, relying on Vue 2-specific plugins and the `vue-class-component` library, which is itself deprecated for Vue 3. Consequently, this package is not compatible with Vue 3 or the Composition API, which offers native solutions like `Suspense` and `computedAsync` from libraries like VueUse for handling asynchronous data. Its primary differentiator was providing a concise decorator syntax for async computed properties within the `vue-class-component` paradigm.

web-framework

npm install vue-async-computed-decorator

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-ASYNC-COMPUTED

vue-async-computed-decorator

web-frameworkjavascriptv0.0.5

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-decorator'

This is the decorator itself, applied directly to class methods. It enables the async computed behavior for a method.

AsyncComputedPlugin

✓ import AsyncComputedPlugin from 'vue-async-computed'

✗ import { AsyncComputedPlugin } from 'vue-async-computed'

The core `vue-async-computed` plugin exports its default as `AsyncComputedPlugin` which must be installed globally with `Vue.use()` for the decorator to function.

Component

✓ import Component from 'vue-class-component'

✗ import { Component } from 'vue-class-component'

This is the decorator from the base `vue-class-component` library, essential for defining class-style Vue components. It is a default export.

This example demonstrates how to define an asynchronous computed property in a Vue 2 class component using the `@AsyncComputed` decorator. It shows the necessary imports, plugin installation, and a basic setup with a simulated data fetch and a loading state.

import Vue from 'vue' import AsyncComputedPlugin from 'vue-async-computed' import AsyncComputed from 'vue-async-computed-decorator' import Component from 'vue-class-component' // Install the base vue-async-computed plugin Vue.use(AsyncComputedPlugin) // Define a Vue 2 class component using decorators @Component class MyComponent extends Vue { // Simulate an asynchronous operation async fetchData() { return new Promise(resolve => { setTimeout(() => resolve('Data fetched!'), 1000) }) } // Decorate a method to make it an async computed property @AsyncComputed async someComputedProp() { const data = await this.fetchData() return `Async result: ${data}` } // A regular computed property to show loading state get loadingMessage() { // The async computed property will be null or its default value while loading return this.someComputedProp === null ? 'Loading async data...' : '' } } // Create a root Vue instance and mount the component new Vue({ el: '#app', template: ` <div id="app"> <h1>Vue Async Computed Decorator Example (Vue 2)</h1> <p v-if="loadingMessage">{{ loadingMessage }}</p> <p>{{ someComputedProp }}</p> </div> `, components: { MyComponent } }).$mount('#app') // To run in a browser, you'd need a basic HTML file: // <div id="app"></div> // <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> // <script src="https://cdn.jsdelivr.net/npm/vue-async-computed@3.9.0/dist/vue-async-computed.js"></script> // <script src="https://cdn.jsdelivr.net/npm/vue-class-component@7.2.6/dist/vue-class-component.min.js"></script> // <script src="https://cdn.jsdelivr.net/npm/reflect-metadata@0.1.13/Reflect.js"></script> // <script type="module">/* compiled code here */</script>

Debug

Known issues

breakingThis package is fundamentally incompatible with Vue 3. It relies on Vue 2's plugin system (`Vue.use`) and the `vue-class-component` library, which does not support Vue 3. Attempting to use it in a Vue 3 project will lead to runtime errors.

fix

For Vue 3, consider using `Suspense` with async `setup()` or `defineAsyncComponent`, or a library like VueUse's `computedAsync` for similar functionality within the Composition API. If class-style components are still desired in Vue 3, use `vue-facing-decorator` with a Vue 3-compatible async computed solution.

affects: >=3.0.0

deprecatedThe underlying `vue-class-component` library is officially deprecated for Vue 3 and has not been actively maintained for Vue 2 for several years. This decorator package itself has not been updated in over six years and should be considered abandoned.

fix

For new projects, avoid using `vue-class-component` and its associated decorators. Migrate existing Vue 2 projects to Composition API or consider `vue-facing-decorator` for Vue 3 if class-style is a strict requirement, but be aware of the lack of direct decorator-based async computed solutions.

affects: >=0.0.1

gotchaWhen using TypeScript, you must enable `experimentalDecorators` and `emitDecoratorMetadata` in your `tsconfig.json` for decorators like `@AsyncComputed` and `@Component` to compile correctly. Failure to do so will result in compilation errors.

fix

Add or ensure the following compiler options in your `tsconfig.json`:
```json
{
  "compilerOptions": {
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  }
}
```

affects: >=0.0.1

Errors

Common errors & fixes

TypeError: Cannot read properties of undefined (reading 'use')

Attempting to use `Vue.use(AsyncComputedPlugin)` or similar Vue 2-specific APIs in a Vue 3 application, where `Vue` (the global constructor) is not directly available in the same way, and the plugin registration mechanism has changed to `app.use()`.

fix

This package is not compatible with Vue 3. Re-architect your asynchronous computed properties using Vue 3's Composition API with `computed` and `watchEffect`, or leverage `Suspense` or external libraries like VueUse's `computedAsync`.

TS1219: Experimental decorators are not enabled. ... TS2345: Argument of type 'typeof AsyncComputed' is not assignable to parameter of type 'PropertyDecorator'.

TypeScript compiler error indicating that decorator support is not configured in `tsconfig.json`.

fix

Ensure `experimentalDecorators` and `emitDecoratorMetadata` are set to `true` in your `tsconfig.json` file. This enables the necessary transpilation for decorator syntax.

Upgrade

Version history

0.0.5latest on npm

Audit

Dependencies

vuerequiredPeer dependency for Vue 2 applications.

vue-async-computedrequiredProvides the core asynchronous computed property logic.

vue-class-componentrequiredBase library for class-style Vue components, on which this decorator is built.

Agent activity

7 hits · last 30 days

node

OpenAI (training)

Resources

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

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