vue

@miyauci/vue-click-outside

vue directive for outside click

🚚 Install

npm i -s @miyauci/vue-click-outside
or
yarn add @miyauci/vue-click-outside

💡 Usage

This provides 3 way Usage.

Global directive

It can be used with all components.

import { createApp } from 'vue'
import App from './App.vue'
import { plugin } from '@miyauci/vue-click-outside'

const app = createApp(App)

app.use(plugin()) // 'v-click-outside' directive usable by default.
// Or you can customize directive name => 'v-click-out'
app.use(
  plugin({
    name: 'ClickOut' // PascalCase
  })
)
app.mount('#app')

template

<template>
  <div v-click-outside="onClickOut">...</div>
</template>

Options API

<script lang="ts">
export default {
  methods: {
    onClickOut(event) {
      console.log(event)
    }
  }
}
</script>

Composition API

<script setup lang="ts">
const onClickOut = (event) => console.log(evnet)
</script>

Directive

<script lang="ts">
import { defineComponent } from 'vue'
import { directive } from '@miyauci/vue-click-outside'

export default defineComponent({
  directives: {
    ClickOutside: directive
  },
  setup() {
    return {
      onClickOut: (e) => console.log(e)
    }
  }
})
</script>

Mixin

<script lang="ts">
import { defineComponent } from 'vue'
import { mixin } from '@miyauci/vue-click-outside'
export default defineComponent({
  mixins: [mixin]

  setup() {
    return {
      onClickOut: (e) => console.log(e)
    }
  }
}
</script>

💞 Related

• @miyauci/react-click-outside