---
title: "vClickOutside"
description: "vClickOutside is a Vue directive to trigger a function when the user clicks outside an element"
package: "maz-ui"
url: "https://maz-ui.com/directives/click-outside"
---

# vClickOutside

> vClickOutside is a Vue directive to trigger a function when the user clicks outside an element

- Package: `maz-ui`
- Import: `import { vClickOutside } from 'maz-ui/directives/vClickOutside'`
- Web: https://maz-ui.com/directives/click-outside

## Basic usage

```vue
<script lang="ts" setup>
import { vClickOutside } from 'maz-ui/directives'
import { ref } from 'vue'

const hasClikedOutside = ref(false)

function clikedOutside() {
  hasClikedOutside.value = true
  setTimeout(() => hasClikedOutside.value = false, 2000)
}
</script>

<template>
  <div
    class="flex flex-center rounded-md p-12 bg-surface-300"
  >
    <MazCard v-click-outside="clikedOutside">
      Click outside me
    </MazCard>
  </div>

  <div
    v-if="hasClikedOutside"
    class="flex flex-center rounded-md bg-sucess text-success-foreground p-4 mt-4"
  >
    You clicked outside
  </div>
</template>
```

## Advanced usage with options

The directive can accept an options object to customize its behavior:

```vue
<script lang="ts" setup>
import { vClickOutside } from 'maz-ui/directives'
import { ref } from 'vue'

const hasClickedOutsideWithIgnore = ref(false)

function clickedOutsideWithIgnore() {
  hasClickedOutsideWithIgnore.value = true
  setTimeout(() => hasClickedOutsideWithIgnore.value = false, 2000)
}
</script>

<template>
  <MazCard v-click-outside="{ callback: clickedOutsideWithIgnore, ignore: ['.ignore-me'] }">
    <div class="p-4">
      <p>Click outside me (but not on the button below)</p>
      <MazBtn class="ignore-me mt-2" color="secondary">
        This button is ignored
      </MazBtn>
    </div>
  </MazCard>
</template>
```

## Using the `once` option

The directive can be configured to trigger only once:

```vue
<script lang="ts" setup>
import { vClickOutside } from 'maz-ui/directives'
import { ref } from 'vue'

const hasClickedOnce = ref(false)

function clickedOnce() {
  hasClickedOnce.value = true
  // This callback will only be triggered once
}
</script>

<template>
  <MazCard v-click-outside="{ callback: clickedOnce, once: true }">
    Click outside me (works only once)
  </MazCard>
</template>
```

## All options combined

Here's an example using all available options:

```vue
<script lang="ts" setup>
import { vClickOutside, type VClickOutsideOptions } from 'maz-ui/directives'

const options: VClickOutsideOptions = {
  callback: handleClickOutside,
  ignore: ['.modal', '.tooltip', '.dropdown-menu'],
  capture: true,
  once: false
}

function handleClickOutside(event: Event) {
  console.log('Clicked outside!', event)
}
</script>

<template>
  <div v-click-outside="options">
    <!-- Your content -->
  </div>
</template>
```

## API Reference

### Usage Patterns

```vue
<!-- Simple function -->
<div v-click-outside="myCallback">...</div>

<!-- With options object -->
<div v-click-outside="{ callback: myCallback, ignore: ['.ignore'] }">...</div>
```

### Options

| Option | Type | Default | Description |
|--------|------|---------|-------------|
| `callback` | `Function` | `undefined` | **Required.** Function to call when clicking outside |
| `ignore` | `string[]` | `[]` | Array of CSS selectors to ignore when detecting clicks |
| `capture` | `boolean` | `false` | Whether to use capture phase for event listening |
| `once` | `boolean` | `false` | Whether to trigger the callback only once |

### Type Definitions

```typescript
interface VClickOutsideOptions {
  callback: (...args: any[]) => any
  ignore?: string[]
  capture?: boolean
  once?: boolean
}

type vClickOutsideBindingValue =
  | ((...args: any[]) => any)
  | VClickOutsideOptions
```

## Global install

### Vue

```typescript
import { vClickOutsideInstall } from 'maz-ui/directives'
import { createApp } from 'vue'

const app = createApp(App)

app.use(vClickOutsideInstall)

app.mount('#app')
```

### Nuxt

Please refer to the [Nuxt module documentation](../ecosystem/nuxt.md) for more information.