Examples

Show modal

<template>
  <div>
    <Preview />
    <OModalsContainer />
  </div>
</template>

<script setup lang="ts">
import { OModalsContainer } from '@outloud/vue-modals'
import Preview from './Preview.vue'
</script>

Open Sandbox

Wait to close

When opening a modal, a promise will be returned, which can be awaited until the modal is closed.

<template>
  <div>
    <Preview />
    <OModalsContainer />
  </div>
</template>

<script setup lang="ts">
import { OModalsContainer } from '@outloud/vue-modals'
import Preview from './Preview.vue'
</script>

Open Sandbox

Return payload

You can return any payload when closing a modal. If you close modal by clicking on background or pressing Esc an undefined value will be returned.

<template>
  <div>
    <Preview />
    <OModalsContainer />
  </div>
</template>

<script setup lang="ts">
import { OModalsContainer } from '@outloud/vue-modals'
import Preview from './Preview.vue'
</script>

Open Sandbox

Using listeners

When opening a modals you can provide listeners that will be called when components emits an event.

<template>
  <div>
    <Preview />
    <OModalsContainer />
  </div>
</template>

<script setup lang="ts">
import { OModalsContainer } from '@outloud/vue-modals'
import Preview from './Preview.vue'
</script>

Open Sandbox

Fetching data

Sometimes you might need to load extra data before displaying the modal. There is an option for that.

<template>
  <div>
    <Preview />
    <OModalsContainer />
  </div>
</template>

<script setup lang="ts">
import { OModalsContainer } from '@outloud/vue-modals'
import Preview from './Preview.vue'
</script>

Open Sandbox

Confirm

Modals are often used when displaying confirm action. There is a utility method that makes it easier.

<template>
  <div>
    <Preview />
    <OModalsContainer />
  </div>
</template>

<script setup lang="ts">
import { OModalsContainer } from '@outloud/vue-modals'
import Preview from './Preview.vue'
</script>

Open Sandbox