{"id":12397,"library":"vue-async-computed-decorator","title":"Vue Async Computed Decorator","description":"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.","status":"abandoned","version":"0.0.5","language":"javascript","source_language":"en","source_url":"https://github.com/foxbenjaminfox/vue-async-computed-decorator","tags":["javascript","vue","data","async","computed","computed data","decorator","typescript"],"install":[{"cmd":"npm install vue-async-computed-decorator","lang":"bash","label":"npm"},{"cmd":"yarn add vue-async-computed-decorator","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-async-computed-decorator","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for Vue 2 applications.","package":"vue","optional":false},{"reason":"Provides the core asynchronous computed property logic.","package":"vue-async-computed","optional":false},{"reason":"Base library for class-style Vue components, on which this decorator is built.","package":"vue-class-component","optional":false}],"imports":[{"note":"This is the decorator itself, applied directly to class methods. It enables the async computed behavior for a method.","symbol":"AsyncComputed","correct":"import AsyncComputed from 'vue-async-computed-decorator'"},{"note":"The core `vue-async-computed` plugin exports its default as `AsyncComputedPlugin` which must be installed globally with `Vue.use()` for the decorator to function.","wrong":"import { AsyncComputedPlugin } from 'vue-async-computed'","symbol":"AsyncComputedPlugin","correct":"import AsyncComputedPlugin from 'vue-async-computed'"},{"note":"This is the decorator from the base `vue-class-component` library, essential for defining class-style Vue components. It is a default export.","wrong":"import { Component } from 'vue-class-component'","symbol":"Component","correct":"import Component from 'vue-class-component'"}],"quickstart":{"code":"import Vue from 'vue'\nimport AsyncComputedPlugin from 'vue-async-computed'\nimport AsyncComputed from 'vue-async-computed-decorator'\nimport Component from 'vue-class-component'\n\n// Install the base vue-async-computed plugin\nVue.use(AsyncComputedPlugin)\n\n// Define a Vue 2 class component using decorators\n@Component\nclass MyComponent extends Vue {\n // Simulate an asynchronous operation\n async fetchData() {\n return new Promise(resolve => {\n setTimeout(() => resolve('Data fetched!'), 1000)\n })\n }\n\n // Decorate a method to make it an async computed property\n @AsyncComputed\n async someComputedProp() {\n const data = await this.fetchData()\n return `Async result: ${data}`\n }\n\n // A regular computed property to show loading state\n get loadingMessage() {\n // The async computed property will be null or its default value while loading\n return this.someComputedProp === null ? 'Loading async data...' : ''\n }\n}\n\n// Create a root Vue instance and mount the component\nnew Vue({\n el: '#app',\n template: `\n
\n

Vue Async Computed Decorator Example (Vue 2)

\n

{{ loadingMessage }}

\n

{{ someComputedProp }}

\n
\n `,\n components: { MyComponent }\n}).$mount('#app')\n\n// To run in a browser, you'd need a basic HTML file:\n//
\n// \n// \n// \n// \n// \n","lang":"typescript","description":"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."},"warnings":[{"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.","message":"This 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.","severity":"breaking","affected_versions":">=3.0.0"},{"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.","message":"The 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.","severity":"deprecated","affected_versions":">=0.0.1"},{"fix":"Add or ensure the following compiler options in your `tsconfig.json`:\n```json\n{\n \"compilerOptions\": {\n \"experimentalDecorators\": true,\n \"emitDecoratorMetadata\": true\n }\n}\n```","message":"When 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.","severity":"gotcha","affected_versions":">=0.0.1"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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`.","cause":"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()`.","error":"TypeError: Cannot read properties of undefined (reading 'use')"},{"fix":"Ensure `experimentalDecorators` and `emitDecoratorMetadata` are set to `true` in your `tsconfig.json` file. This enables the necessary transpilation for decorator syntax.","cause":"TypeScript compiler error indicating that decorator support is not configured in `tsconfig.json`.","error":"TS1219: Experimental decorators are not enabled. ... TS2345: Argument of type 'typeof AsyncComputed' is not assignable to parameter of type 'PropertyDecorator'."}],"ecosystem":"npm"}