Basic Features

Alert

An alert dialog can be triggered using the $dialog.alert() method. This method returns a promise which resolves when the dialog is dismissed.

<template>
  <UIExamplesButton @click="openDialog">Show alert</UIExamplesButton>
</template>

<script setup>
  import {inject} from 'vue'
  import {injectionKey} from "../../../src/plugin/index.ts";

  defineOptions({
    name: "FeaturesExampleAlert"
  })

  const $dialog = inject(injectionKey)
  const openDialog = () => $dialog.alert({
    title: 'Alert example',
    body: 'Session expired. Please login again to continue.',
  }, {
    okText: 'Dismiss'
  })
</script>

A confirm dialog can be triggered with the $dialog.confirm() method. Like the alert dialog, this method returns a promise which resolves when the dialog is dismissed. In this section we shall explore how to create a basic confirm dialog as well as the two other variations of the confirm dialog namely; soft and hard confirmation dialogs.

Basic confirm dialog

<template>
  <UIExamplesButton @click="openDialog">Show confirm | basic</UIExamplesButton>
</template>

<script setup>
  import {inject} from 'vue'
  import {injectionKey} from "../../../src/plugin/index.ts";

  defineOptions({
    name: "FeaturesExampleConfirm"
  })

  const $dialog = inject(injectionKey)
  const openDialog = () => $dialog.confirm({
    title: 'Confirm example',
    body: 'The is a low risk operation. Single click required to confirm.',
  }, {
    cancelText: 'No',
    okText: 'Yes'
  })
</script>

Soft confirm dialog

<template>
  <UIExamplesButton @click="openDialog">Show confirm | soft</UIExamplesButton>
</template>

<script setup>
  import {inject} from 'vue'
  import {injectionKey} from "../../../src/plugin/index.ts";

  defineOptions({
    name: "FeaturesExampleConfirmSoft"
  })

  const $dialog = inject(injectionKey)
  const openDialog = () => $dialog.confirm({
    title: 'Soft confirm example',
    body: 'This is a medium risk action. Multiple clicks required to confirm',
  }, {
    cancelText: 'Cancel',
    okText: 'Proceed',
    clicksCount: 2,
    type: 'soft'
  })
</script>

Hard confirm dialog

<template>
  <UIExamplesButton @click="openDialog">Show confirm | hard</UIExamplesButton>
</template>

<script setup>
  import {inject} from 'vue'
  import {injectionKey} from "../../../src/plugin/index.ts";

  defineOptions({
    name: "FeaturesExampleConfirm"
  })

  const $dialog = inject(injectionKey)
  const openDialog = () => $dialog.confirm({
    title: 'Confirm example',
    body: 'The requested resource is no longer available. It may have been moved or deleted',
  }, {
    cancelText: 'No',
    okText: 'Yes',
    type: 'hard'
  })
</script>

Prompt

The $dialog.prompt() method creates a prompt dialog. Use the prompt dialog to ask user directly for input.

<template>
  <UIExamplesButton @click="openDialog">Show prompt</UIExamplesButton>
</template>

<script setup>
  import {inject} from 'vue'
  import {injectionKey} from "../../../src/plugin/index.ts";

  defineOptions({
    name: "FeaturesExamplePrompt"
  })

  const $dialog = inject(injectionKey)
  const openDialog = () => $dialog.prompt({
    title: 'Prompt Example',
    body: 'What is the most important thing in life?',
  }, {
    cancelText: 'Dismiss',
    okText: 'Done',
    promptHelp: 'Type in the box below and click "[+:okText]"'
  }).then(result => {
    if (result.canceled) return;
    $dialog.alert(JSON.stringify(result))
  })
</script>

Confirm directive

Add the v-confirm directive to any element to instantly cause it to trigger a confirm dialog. This dialog upon confirmation will trigger the default action or the provided callback when available.

A link or a

<template>
  <a href="https://example.com"
     target="_blank"
     v-confirm="'Confirming this dialog will take you to an external website'"
  >A link</a>
  <span> or a </span>
  <button v-confirm="'Confirm to change button text to \'Already clicked\''"
          @click="($event) => $event.target.textContent = 'Already clicked'"
  >button</button>
</template>