{"id":12493,"library":"vue-hooks-plus","title":"VueHooks Plus","description":"VueHooks Plus is a high-performance and simple library offering a comprehensive collection of Vue 3 composition API hooks. It is currently stable at version 2.4.3 and demonstrates an active development cadence with frequent minor and patch releases. Key differentiators include its robust `useRequest` hook for powerful request management, full TypeScript support with predictable static types, SSR compatibility, and support for on-demand loading and auto-imports via resolvers like `@vue-hooks-plus/resolvers`. The library aims to provide a rich set of utilities for common Vue development patterns, promoting reusability and simplifying complex logic within Vue 3 applications.","status":"active","version":"2.4.3","language":"javascript","source_language":"en","source_url":"https://github.com/InhiblabCore/vue-hooks-plus","tags":["javascript","vue-hooks-plus","vue hooks","typeScript","typescript"],"install":[{"cmd":"npm install vue-hooks-plus","lang":"bash","label":"npm"},{"cmd":"yarn add vue-hooks-plus","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-hooks-plus","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required for all Vue 3 projects using this library.","package":"vue","optional":false}],"imports":[{"note":"Primary import for the powerful data fetching hook. The library is ESM-first, so CommonJS `require` is incorrect for direct imports.","wrong":"const { useRequest } = require('vue-hooks-plus')","symbol":"useRequest","correct":"import { useRequest } from 'vue-hooks-plus'"},{"note":"While on-demand imports were previously shown, the recommended approach for most hooks is named import from the main package. The 'es/' path is for specific advanced bundling cases.","wrong":"import useLocalStorage from 'vue-hooks-plus/es/useLocalStorage'","symbol":"useLocalStorage","correct":"import { useLocalStorage } from 'vue-hooks-plus'"},{"note":"This resolver is used with `unplugin-auto-import` for automatic hook imports and comes from a separate, companion package.","wrong":"import { VueHooksPlusResolver } from 'vue-hooks-plus'","symbol":"VueHooksPlusResolver","correct":"import { VueHooksPlusResolver } from '@vue-hooks-plus/resolvers'"}],"quickstart":{"code":"import { ref } from 'vue'\nimport { useRequest } from 'vue-hooks-plus'\n\ninterface UserData {\n  id: number;\n  name: string;\n  email: string;\n}\n\n// Simulate an API call\nconst fetchUser = async (userId: number): Promise<UserData> => {\n  console.log(`Fetching user with ID: ${userId}`)\n  await new Promise(resolve => setTimeout(resolve, 1000))\n  if (userId === 1) {\n    return { id: 1, name: 'John Doe', email: 'john@example.com' }\n  } else if (userId === 2) {\n    throw new Error('User not found')\n  } else {\n    return { id: userId, name: `User ${userId}`, email: `user${userId}@example.com` }\n  }\n}\n\n// A basic Vue component using useRequest\nexport default {\n  setup() {\n    const currentUserId = ref(1)\n\n    const { data, loading, error, run, cancel } = useRequest(\n      () => fetchUser(currentUserId.value),\n      {\n        refreshDeps: [currentUserId],\n        pollingInterval: 5000, // Poll every 5 seconds\n        manual: false, // Automatically run on mount/deps change\n        onError: (e) => console.error('Request error:', e.message)\n      }\n    )\n\n    const fetchNextUser = () => {\n      currentUserId.value++\n    }\n\n    return {\n      data,\n      loading,\n      error,\n      fetchNextUser,\n      cancel,\n      currentUserId\n    }\n  },\n  template: `\n    <div>\n      <h1>User Data with useRequest</h1>\n      <p>Current User ID: {{ currentUserId }}</p>\n      <div v-if=\"loading\">Loading user...</div>\n      <div v-else-if=\"error\">Error: {{ error.message }}</div>\n      <div v-else-if=\"data\">\n        <p>ID: {{ data.id }}</p>\n        <p>Name: {{ data.name }}</p>\n        <p>Email: {{ data.email }}</p>\n      </div>\n      <button @click=\"fetchNextUser\">Fetch Next User</button>\n      <button @click=\"cancel\">Cancel Request</button>\n    </div>\n  `\n}","lang":"typescript","description":"This example demonstrates how to use the `useRequest` hook to fetch data, handle loading and error states, and dynamically change parameters, including polling."},"warnings":[{"fix":"Review project dependencies and imports. If directly using lodash functionality, ensure you are importing from `lodash-es` for tree-shaking benefits or update your import paths.","message":"In `v2.3.1`, the internal dependency `lodash` was replaced with `lodash-es`. While this generally improves bundle size and tree-shaking, direct imports from `lodash` within your project, if any, may need to be updated to `lodash-es` or refactored.","severity":"breaking","affected_versions":">=2.3.1"},{"fix":"Verify that `unplugin-auto-import` and `@vue-hooks-plus/resolvers` are installed as dev dependencies, and that your `vite.config.ts` or `webpack.config.js` includes the correct resolver configuration as shown in the documentation.","message":"When using auto-import features, ensure you have correctly installed and configured `@vue-hooks-plus/resolvers` with `unplugin-auto-import`. Misconfiguration can lead to 'hook not found' errors or incorrect global availability.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Thoroughly test `useRequest` implementations in environments with potential concurrent requests after upgrading to `v2.4.0` to ensure no unexpected side effects or race conditions arise, especially in scenarios where state mutation order is critical.","message":"The `useRequest` hook in `v2.4.0` introduced support for concurrent requests. While this is an enhancement, developers relying on previous sequential request behaviors in complex scenarios might need to review their usage patterns to ensure expected behavior.","severity":"gotcha","affected_versions":">=2.4.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure you are using ES Module import syntax: `import { useRequest } from 'vue-hooks-plus'` in a module-aware environment (e.g., modern Vite/Webpack setup).","cause":"Attempting to use CommonJS `require` syntax or incorrect named import destructuring for a library that primarily exports ES Modules.","error":"TypeError: (0 , vue_hooks_plus__WEBPACK_IMPORTED_MODULE_2__.useRequest) is not a function"},{"fix":"If manually importing, ensure `import { useRequest } from 'vue-hooks-plus'` is present. If using auto-import, verify `@vue-hooks-plus/resolvers` is correctly configured in your build tool and that `src/auto-imports.d.ts` (or similar) has been generated.","cause":"TypeScript or IDE cannot find the hook, often due to missing type definitions or incorrect auto-import configuration.","error":"Cannot find name 'useRequest'. Did you mean 'Request'?"},{"fix":"Ensure that reactive variables (like those returned by `ref`, `computed`, or some hook properties) are explicitly unwrapped or accessed with `.value` where appropriate, especially within `<script setup>` or template expressions where auto-unwrapping might not apply.","cause":"Attempting to access `.value` on a non-ref object returned by a hook, typically in a reactive context, or incorrectly typing a reactive variable.","error":"Property 'value' does not exist on type '(...args: any[]) => Promise<any>'"}],"ecosystem":"npm"}