VueHooks Plus

Common errors

• TypeError: (0 , vue_hooks_plus__WEBPACK_IMPORTED_MODULE_2__.useRequest) is not a function

  cause Attempting to use CommonJS `require` syntax or incorrect named import destructuring for a library that primarily exports ES Modules.
  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).

• Cannot find name 'useRequest'. Did you mean 'Request'?

  cause TypeScript or IDE cannot find the hook, often due to missing type definitions or incorrect auto-import configuration.
  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.

• Property 'value' does not exist on type '(...args: any[]) => Promise<any>'

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

Warnings

• breaking 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.
  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.
• gotcha 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.
  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.
• gotcha 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.
  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.

Install

• npm install vue-hooks-plus npm
• yarn add vue-hooks-plus yarn
• pnpm add vue-hooks-plus pnpm

Imports

• useRequest
  wrong:

  const { useRequest } = require('vue-hooks-plus')

  correct:

  import { useRequest } from 'vue-hooks-plus'

  Primary import for the powerful data fetching hook. The library is ESM-first, so CommonJS `require` is incorrect for direct imports.
• useLocalStorage
  wrong:

  import useLocalStorage from 'vue-hooks-plus/es/useLocalStorage'

  correct:

  import { useLocalStorage } from 'vue-hooks-plus'

  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.
• VueHooksPlusResolver
  wrong:

  import { VueHooksPlusResolver } from 'vue-hooks-plus'

  correct:

  import { VueHooksPlusResolver } from '@vue-hooks-plus/resolvers'

  This resolver is used with `unplugin-auto-import` for automatic hook imports and comes from a separate, companion package.

Quickstart

This example demonstrates how to use the `useRequest` hook to fetch data, handle loading and error states, and dynamically change parameters, including polling.

import { ref } from 'vue'
import { useRequest } from 'vue-hooks-plus'

interface UserData {
  id: number;
  name: string;
  email: string;
}

// Simulate an API call
const fetchUser = async (userId: number): Promise<UserData> => {
  console.log(`Fetching user with ID: ${userId}`)
  await new Promise(resolve => setTimeout(resolve, 1000))
  if (userId === 1) {
    return { id: 1, name: 'John Doe', email: 'john@example.com' }
  } else if (userId === 2) {
    throw new Error('User not found')
  } else {
    return { id: userId, name: `User ${userId}`, email: `user${userId}@example.com` }
  }
}

// A basic Vue component using useRequest
export default {
  setup() {
    const currentUserId = ref(1)

    const { data, loading, error, run, cancel } = useRequest(
      () => fetchUser(currentUserId.value),
      {
        refreshDeps: [currentUserId],
        pollingInterval: 5000, // Poll every 5 seconds
        manual: false, // Automatically run on mount/deps change
        onError: (e) => console.error('Request error:', e.message)
      }
    )

    const fetchNextUser = () => {
      currentUserId.value++
    }

    return {
      data,
      loading,
      error,
      fetchNextUser,
      cancel,
      currentUserId
    }
  },
  template: `
    <div>
      <h1>User Data with useRequest</h1>
      <p>Current User ID: {{ currentUserId }}</p>
      <div v-if="loading">Loading user...</div>
      <div v-else-if="error">Error: {{ error.message }}</div>
      <div v-else-if="data">
        <p>ID: {{ data.id }}</p>
        <p>Name: {{ data.name }}</p>
        <p>Email: {{ data.email }}</p>
      </div>
      <button @click="fetchNextUser">Fetch Next User</button>
      <button @click="cancel">Cancel Request</button>
    </div>
  `
}