Vue Providers
A simple collection of general-purpose directives for Vue 2/3. Powered by VueUse
Install
yarn add vue-directive-providers
Use
in src/main.(js|ts)
import { createApp } from "vue";
import { ProviderPlugin } from "vue-directive-providers";
import App from "./App.vue";
const app = createApp(App);
//...
app.use(ProviderPlugin);
//...
app.mount("#app");Directives
v-provider-arrowsv-provider-closev-provider-focusv-provider-hoverv-provider-outsidev-provider-pressed
v-provider-arrows
<input
v-provider-arrows
:left="functionHere"
:right="functionHere"
:up="functionHere"
:down="functionHere"
/>v-provider-close
<div v-provider-close :esc="functionHere" />v-provider-focus
<input v-provider-focus :focused="functionHere" :unfocused="functionHere" />v-provider-hover
<div v-provider-hover :enter="functionHere" :leave="functionHere" />v-provider-outside
<div v-provider-outside :outside="functionHere" />v-provider-pressed
<div v-provider-pressed :on="functionHere" :off="functionHere" />