UNPKG

@venegrad/vue3-click-outside

Version:

Vue click outside directive for vue3 and nuxt3

66 lines (53 loc) 1.26 kB
# Vue 3 Click Outside directive Directive for adding click outside event in Vue 3 or Nuxt3 ## Using in component ```html <template> <div class="conainer"> <div v-outside="hide"> <button @click="open = true">{{ open }}</button> </div> </div> </template> <script> import outside from "@venegrad/vue3-click-outside" export default { data() { return { open: false } }, directives: { outside }, methods: { hide() { this.open = false } } } </script> ``` or u can register it global if need \ `./src/main.js` ```js import { createApp } from 'vue' import App from './App.vue' import outside from "@venegrad/vue3-click-outside" const app = createApp(App) app.directive('outside', outside) app.mount('#app') ``` ## Nuxtjs 3 use it as global plugin: \ `./plugins/global.js` ```js import outside from "@venegrad/vue3-click-outside" export default defineNuxtPlugin(async (nuxtApp) => { nuxtApp.vueApp.directive('outside', outside) }) ``` ## Help links: - If my solution was helpful to you, please give me a star on [Github](https://github.com/Venegrad/vue3-click-outside) or get my day better with: - USDT TRC20: `TKXybH3YoFvT5h8bQFLdkDBtiXA65y7xaB` - USDT ERC20: `0xc3efeB4825E350eE5D6B032Aa1dE144B09B5bB0D`