{"id":10486,"library":"ahooks-vue","title":"Ahooks Vue","description":"ahooks-vue is a comprehensive collection of Vue Composition API hooks, designed to simplify common logic and stateful operations in Vue 2 (specifically 2.7+) and Vue 3 applications. Many of its hooks are direct ports and adaptations from the popular React hooks library, ahooks, offering a familiar API for developers transitioning or working across both ecosystems. Currently at version 0.15.1, the library sees a consistent, though not strictly scheduled, release cadence, with minor versions frequently bringing new features and bug fixes. Its key differentiators include broad compatibility achieved through `vue-demi`, enabling a single codebase for both major Vue versions, and full TypeScript support, providing predictable static types for enhanced developer experience and code maintainability. It aims to provide a robust and production-ready set of utilities for common patterns like state management, async requests, DOM operations, and more, similar to `vue-use` but with a distinct API influence from `ahooks`.","status":"active","version":"0.15.1","language":"javascript","source_language":"en","source_url":"https://github.com/dewfall123/ahooks-vue","tags":["javascript","ahooks-vue","ahooks","vue","vue3","hooks","vue-use","vue-hooks","typescript"],"install":[{"cmd":"npm install ahooks-vue","lang":"bash","label":"npm"},{"cmd":"yarn add ahooks-vue","lang":"bash","label":"yarn"},{"cmd":"pnpm add ahooks-vue","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for network request hooks like `useRequest` for HTTP client functionality. It is a peer dependency.","package":"axios","optional":true}],"imports":[{"note":"The library primarily uses named exports. Avoid CommonJS `require` syntax as this is an ESM-first package.","wrong":"const useRequest = require('ahooks-vue').useRequest;","symbol":"useRequest","correct":"import { useRequest } from 'ahooks-vue';"},{"note":"All utility hooks are named exports. There is no default export from the main package.","wrong":"import useWorkerFunction from 'ahooks-vue';","symbol":"useWorkerFunction","correct":"import { useWorkerFunction } from 'ahooks-vue';"},{"note":"Ensure to import specific hooks directly from the package, rather than attempting to destructure from a non-existent default export or an incorrect path.","symbol":"useUrlState","correct":"import { useUrlState } from 'ahooks-vue';"},{"note":"While ahooks-vue provides hooks, core Vue types like `Ref` should be imported directly from 'vue' itself for clarity and type correctness, especially when working with TypeScript.","symbol":"Ref","correct":"import type { Ref } from 'vue';"}],"quickstart":{"code":"import { defineComponent, ref } from 'vue';\nimport { useRequest } from 'ahooks-vue';\nimport axios from 'axios';\n\ninterface User {\n id: number;\n name: string;\n email: string;\n}\n\nconst fetchUser = async (userId: number): Promise => {\n const response = await axios.get(`https://jsonplaceholder.typicode.com/users/${userId}`);\n return response.data;\n};\n\nexport default defineComponent({\n setup() {\n const userId = ref(1);\n const { data, loading, error, run } = useRequest(() => fetchUser(userId.value), {\n manual: true, // Prevents immediate execution on component mount\n onSuccess: (result) => {\n console.log('User fetched successfully:', result);\n },\n onError: (err) => {\n console.error('Error fetching user:', err);\n },\n });\n\n const fetchUserData = () => run();\n\n return {\n data,\n loading,\n error,\n fetchUserData\n };\n },\n template: `\n
\n

User Data with useRequest

\n

This demonstrates fetching user data using ahooks-vue's useRequest hook.

\n \n
Error: {{ error.message }}
\n
\n

ID: {{ data.id }}

\n

Name: {{ data.name }}

\n

Email: {{ data.email }}

\n
\n
Click the button to fetch user data.
\n
\n `\n});","lang":"typescript","description":"This quickstart demonstrates how to fetch data asynchronously using the `useRequest` hook with Axios in a Vue 3 component. It shows manual execution, loading state, error handling, and data display."},"warnings":[{"fix":"Remove all references to `useOLAP`. If its functionality is still needed, a custom implementation or an alternative utility must be found or developed.","message":"The `useOLAP` hook has been completely removed from the library. Any code relying on this hook will break.","severity":"breaking","affected_versions":">=0.14.0"},{"fix":"Ensure your Vue 2 project is updated to at least Vue 2.7 to guarantee full compatibility and access to Composition API features required by ahooks-vue.","message":"While ahooks-vue aims for Vue 2 and Vue 3 compatibility, specifically it targets Vue 2.7 and above for Vue 2. Older Vue 2 versions might not be fully supported due to reliance on features backported in 2.7 or `vue-demi` limitations.","severity":"gotcha","affected_versions":"<2.7.0 (Vue 2)"},{"fix":"Install axios using your package manager: `npm install axios` or `yarn add axios`.","message":"For hooks like `useRequest` that perform HTTP requests, the `axios` library is a peer dependency and must be installed separately in your project.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Review your `tsconfig.json` for appropriate settings that support modern JavaScript modules and Vue's Composition API types. Ensure `vue-tsc` is used for proper type checking in Vue projects.","message":"When using ahooks-vue in a TypeScript project, ensure your `tsconfig.json` is correctly configured for Vue 3 or Vue 2.7+ (e.g., `\"target\": \"esnext\"` and `\"moduleResolution\": \"node\"` or `\"bundler\"`).","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Check the official documentation or release notes for available hooks. For instance, `useOLAP` was removed in v0.14.0.","cause":"Attempting to import a hook that has been removed or renamed in a newer version of the library.","error":"Module 'ahooks-vue' has no exported member 'useSomeRemovedHook'"},{"fix":"Run `npm install axios` or `yarn add axios` in your project directory.","cause":"The `axios` package, a peer dependency for certain hooks like `useRequest`, has not been installed in the project.","error":"Error: axios is not defined (or similar reference error during runtime)"},{"fix":"Ensure your project is configured for ES Modules (e.g., `\"type\": \"module\"` in `package.json` for Node.js, or a bundler like Vite/Webpack is correctly transpiling modules for browsers). If stuck with CJS, you may need dynamic `import()` or reconsider the module setup.","cause":"Attempting to use `import` syntax in a CommonJS environment without proper transpilation or configuration, indicating a mismatch in module systems.","error":"SyntaxError: Cannot use import statement outside a module"},{"fix":"Verify that `vue-demi` is correctly installed and configured. For Vue 2, ensure components using Composition API are registered appropriately (e.g., using `Vue.extend` or through a build setup that handles Vue 2 Composition API transpilation).","cause":"While not directly an ahooks-vue error, incorrect integration of Composition API components (where ahooks-vue hooks are used) into a Vue 2 application can lead to this. It often happens if `vue-demi`'s setup is misconfigured or the component is not properly registered.","error":"[Vue warn]: Failed to resolve component: "}],"ecosystem":"npm"}