VueHook Plus

简体中文
English

简体中文
English

Appearance

Return to top
On this page

VueHooks Plus

npm package

Through this chapter, you will know how to quickly start using VueHooks Plus.

✨ Features

  • 🏄🏼‍♂️ Easy to learn and use
  • 🔋 Supports SSR
  • 🛸 Contains a comprehensive collection of basic Hooks
  • 🏟️ A wide range of application scenarios
  • 🦾 Preferred useRequest, Powerful request middle tier
  • 🎪 Interactive demo, immersive
  • 🎯 Written in TypeScript with predictable static types
  • 🪄 Support the on-demand load, and reduce the packing volume
  • 🤺 Playground, there's ample scope for one's abilities
  • 🔐 Perfect test, safe and reliable

📦 Install 

npm i vue-hooks-plus

npm i vue-hooks-plus

🔨 Usage

All 

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

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

Introduced on demand 

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

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

Auto Import

Use unplugin-auto-import's resolver


npm i -D @vue-hooks-plus/resolvers



npm i -D @vue-hooks-plus/resolvers

Vite 

import AutoImport from 'unplugin-auto-import/vite'
import { VueHooksPlusResolver } from '@vue-hooks-plus/resolvers'

export const AutoImportDeps = () =>
  AutoImport({
    imports: ['vue', 'vue-router'],
    include: [/\.[tj]sx?$/, /\.vue$/, /\.vue\?vue/, /\.md$/],
    dts: 'src/auto-imports.d.ts',
    resolvers: [VueHooksPlusResolver()],
  })

import AutoImport from 'unplugin-auto-import/vite'
import { VueHooksPlusResolver } from '@vue-hooks-plus/resolvers'

export const AutoImportDeps = () =>
  AutoImport({
    imports: ['vue', 'vue-router'],
    include: [/\.[tj]sx?$/, /\.vue$/, /\.vue\?vue/, /\.md$/],
    dts: 'src/auto-imports.d.ts',
    resolvers: [VueHooksPlusResolver()],
  })

Webpack 

const { VueHooksPlusResolver } = require('@vue-hooks-plus/resolvers')
module.exports = {
  /* ... */
  plugins: [
    require('unplugin-auto-import/webpack')({
      imports: ['vue', 'vue-router'],
      include: [/\.[tj]sx?$/, /\.vue$/, /\.vue\?vue/, /\.md$/],
      dts: 'src/auto-imports.d.ts',
      resolvers: [VueHooksPlusResolver()],
    }),
  ],
}

const { VueHooksPlusResolver } = require('@vue-hooks-plus/resolvers')
module.exports = {
  /* ... */
  plugins: [
    require('unplugin-auto-import/webpack')({
      imports: ['vue', 'vue-router'],
      include: [/\.[tj]sx?$/, /\.vue$/, /\.vue\?vue/, /\.md$/],
      dts: 'src/auto-imports.d.ts',
      resolvers: [VueHooksPlusResolver()],
    }),
  ],
}

For other supported tools, please see unplugin-auto-import


🧩 Compatible

Not compatible with vue2 version