Understanding and Using Custom Hooks (Composition API) in Vue 3

Preface : The author describes their initial confusion when first encountering Vue 3 custom hooks (Composition API) and concludes that while custom hooks are not mandatory, they provide a convenient way to reuse logic across components.

Introduction

In Vue 3, what many call custom hooks are officially referred to as the Composition API , a collection of functions that let developers write components using functions instead of the traditional options API.

The Composition API is a set of APIs that enable function‑based component composition.

It is built on Vue's fine‑grained reactivity system and is not the same as functional programming.

Its main advantage is allowing logic reuse through composable functions, solving the drawbacks of mixins.

Usage

Custom hooks can be created in two main ways:

Business‑specific hooks that extract reusable logic for a single project.

Highly reusable hooks that can be shared across multiple projects (e.g., for dialogs, tables, forms).

Business‑specific hooks

The author shows a low‑code project where several components (input, dropdown, switch) share a common status property. By encapsulating the status handling in a custom hook, each component can simply import the hook instead of duplicating code.

Highly reusable hooks

1) Changing the page title

Instead of writing repetitive code on every page to set the document title, a useTitle hook can be imported and used with a single line:

const setTitle = useTitle('测试')

2) Table pagination and CRUD operations

A pagination hook can be shared among different admin pages, providing a consistent way to handle page changes and data fetching.

Curated Vue 3 Hook Resources

The author lists several open‑source libraries and repositories that provide ready‑made hooks, including:

VueUse – the official Vue 3 community collection (e.g., useResizeObserver , useTitle , useClipboard , useDraggable ).

ahooks‑vue – Vue ports of the popular ahooks library (e.g., useRequest , useAxios , useFullscreen , useTable ).

vhook , vue‑hooks , vue‑use‑web , vue‑hooks‑plus , v3hooks – various community‑maintained collections offering hooks such as useDate , useStore , useActions , useRequest , useVirtualList , etc.

vue‑vben‑admin and vue3‑antd‑admin – large admin‑template projects that include many practical hooks for tables, forms, modals, i18n, and more.

Additional articles and tutorials are linked for deeper dives into specific hooks for tables, network requests, forms, theming, media queries, and other common UI patterns.

Conclusion

The author hopes the compiled list of hooks and resources helps developers improve their Vue 3 projects, invites contributions, and mentions an upcoming personal hook library named jym-hooks aiming to rival vueuse .