Ahooks Vue

Common errors

• Module 'ahooks-vue' has no exported member 'useSomeRemovedHook'

  cause Attempting to import a hook that has been removed or renamed in a newer version of the library.
  fix Check the official documentation or release notes for available hooks. For instance, `useOLAP` was removed in v0.14.0.

• Error: axios is not defined (or similar reference error during runtime)

  cause The `axios` package, a peer dependency for certain hooks like `useRequest`, has not been installed in the project.
  fix Run `npm install axios` or `yarn add axios` in your project directory.

• SyntaxError: Cannot use import statement outside a module

  cause Attempting to use `import` syntax in a CommonJS environment without proper transpilation or configuration, indicating a mismatch in module systems.
  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.

• [Vue warn]: Failed to resolve component: <YourComponentName>

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

Warnings

• breaking The `useOLAP` hook has been completely removed from the library. Any code relying on this hook will break.
  Fix: Remove all references to `useOLAP`. If its functionality is still needed, a custom implementation or an alternative utility must be found or developed.
• gotcha 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.
  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.
• gotcha For hooks like `useRequest` that perform HTTP requests, the `axios` library is a peer dependency and must be installed separately in your project.
  Fix: Install axios using your package manager: `npm install axios` or `yarn add axios`.
• gotcha 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"`).
  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.

Install

• npm install ahooks-vue npm
• yarn add ahooks-vue yarn
• pnpm add ahooks-vue pnpm

Imports

• useRequest
  wrong:

  const useRequest = require('ahooks-vue').useRequest;

  correct:

  import { useRequest } from 'ahooks-vue';

  The library primarily uses named exports. Avoid CommonJS `require` syntax as this is an ESM-first package.
• useWorkerFunction
  wrong:

  import useWorkerFunction from 'ahooks-vue';

  correct:

  import { useWorkerFunction } from 'ahooks-vue';

  All utility hooks are named exports. There is no default export from the main package.
• useUrlState

  import { useUrlState } from 'ahooks-vue';

  Ensure to import specific hooks directly from the package, rather than attempting to destructure from a non-existent default export or an incorrect path.
• Ref

  import type { Ref } from 'vue';

  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.

Quickstart

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.

import { defineComponent, ref } from 'vue';
import { useRequest } from 'ahooks-vue';
import axios from 'axios';

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

const fetchUser = async (userId: number): Promise<User> => {
  const response = await axios.get(`https://jsonplaceholder.typicode.com/users/${userId}`);
  return response.data;
};

export default defineComponent({
  setup() {
    const userId = ref(1);
    const { data, loading, error, run } = useRequest(() => fetchUser(userId.value), {
      manual: true, // Prevents immediate execution on component mount
      onSuccess: (result) => {
        console.log('User fetched successfully:', result);
      },
      onError: (err) => {
        console.error('Error fetching user:', err);
      },
    });

    const fetchUserData = () => run();

    return {
      data,
      loading,
      error,
      fetchUserData
    };
  },
  template: `
    <div style="padding: 20px; font-family: sans-serif;">
      <h1>User Data with useRequest</h1>
      <p>This demonstrates fetching user data using ahooks-vue's useRequest hook.</p>
      <button @click="fetchUserData" :disabled="loading" style="padding: 10px 15px; background-color: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer;">
        {{ loading ? 'Loading...' : 'Fetch User (ID: 1)' }}
      </button>
      <div v-if="error" style="color: red; margin-top: 10px;">Error: {{ error.message }}</div>
      <div v-if="data" style="background-color: #f8f9fa; padding: 15px; border-radius: 4px; margin-top: 10px;">
        <p><strong>ID:</strong> {{ data.id }}</p>
        <p><strong>Name:</strong> {{ data.name }}</p>
        <p><strong>Email:</strong> {{ data.email }}</p>
      </div>
      <div v-else-if="!loading" style="margin-top: 10px; color: #6c757d;">Click the button to fetch user data.</div>
    </div>
  `
});