https://github.com/1bye/vue-hook-directive
Plugin for vue, which integrates features from hookable to vue directives and composable
https://github.com/1bye/vue-hook-directive
Last synced: 10 months ago
JSON representation
Plugin for vue, which integrates features from hookable to vue directives and composable
- Host: GitHub
- URL: https://github.com/1bye/vue-hook-directive
- Owner: 1bye
- Created: 2023-08-27T17:49:05.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2023-08-28T10:13:02.000Z (almost 3 years ago)
- Last Synced: 2025-07-24T09:16:02.809Z (10 months ago)
- Language: TypeScript
- Size: 23.4 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Vue Hook Directive
The **Vue Hook Directive** is a powerful Vue plugin
that seamlessly integrates features from the [hookable](https://www.npmjs.com/package/hookable) library into Vue directives and composables, enabling you to harness the full potential of hooks within your Vue applications.
## Installation
You can easily install the Vue Hook Directive using your preferred package manager:
Using npm:
```bash
npm install vue-hook-directive
```
Using yarn:
```bash
yarn add vue-hook-directive
```
Using pnpm:
```bash
pnpm add vue-hook-directive
```
## Why Choose This Library?
There are several compelling reasons to utilize this library in your Vue projects:
1. **Cross-Component Hooks**: You can utilize hooks across different components effortlessly. For instance:
```vue
Click on me
```
1. **Flexible Hook Names**: Hooks can be assigned names to enable fine-grained control.
If a hook name isn't specified, the default hook name will be the associated event name (e.g., 'click' for a click event).
2. **Dynamic Hook Usage**: Hooks can be accessed dynamically using the `$hook` function and a specific hook name:
```vue
Showed
```
## Plugin Functionality
### Composable Usage
The Vue Hook Directive offers a composable API:
```ts
import { useHook } from 'vue-hook-directive';
const { hook, callHook } = useHook();
hook('expand', (data) => {
console.log(data || true);
});
```
### Global Function `$hook`
You can utilize the global `$hook` function to integrate hooks into various Vue directives:
```vue
{{ $hook('hook_name') }}
{{ $hook('hook_name', {clear: 1000}) }}
{{ $hook('hook_name', {clear: 1000, default: 'something'}) }}
{{ $hook('hook_name', {default: 'something'}) }}
```
### Directive
Directive usage, `v-hook:event_name.hook_name="value""`
```vue
Click to expand
Click to expand
Click to expand
Toggle view
Click to expand
Click to expand
```
## Usage
### Basic Usage
To incorporate the Vue Hook Directive into your application:
```ts
import { createApp } from 'vue';
import App from './App.vue';
import { vueDirective } from 'vue-hook-directive';
const app = createApp(App);
app.use(vueDirective, {});
app.mount('#app');
```
### Usage with Options
You can customize the behavior of the Vue Hook Directive by passing options:
```ts
app.use(vueDirective, {
prefix: '', // Adds a prefix before hooks
listeners: ['your-custom-listener'] // Add your custom listeners for v-hook directive
});
```
### Usage with Nuxt
In a Nuxt application, you can follow these steps:
1. Create a file named `VueHookDirective.js` within the `/plugins` directory in your Nuxt app.
2. In `VueHookDirective.js`, import and apply the Vue Hook Directive:
```ts
import { vueDirective } from 'vue-hook-directive';
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(vueDirective);
// or with options
nuxtApp.vueApp.use(vueDirective, {
prefix: '', // Adds a prefix before hooks
listeners: ['your-custom-listener'] // Add your custom listeners for v-hook directive
});
});
```
By following these steps, you can seamlessly integrate the Vue Hook Directive into your Nuxt project.
Harness the power of hooks and enhance your Vue applications with the Vue Hook Directive!