Alert dialogs

Alert dialogs are defined using <v-ons-alert-dialog> and <v-ons-alert-dialog-button> tags. Alert dialogs work exactly like normal dialogs but they require some additional markup. With this element you can create a beautifully styled dialog without any additional CSS.

To show or hide the dialog the visible prop is used. An update:visible event is fired when the user interacts with the component (taps the background mask). Use this event to refresh the value of visible prop. v-model:visible can also be used.

Custom alerts

VOnsAlertDialog allows to create custom alerts with optional inputs, methods or anything else. We can pass all the information with props:

<v-ons-alert-dialog modifier="rowfooter"
  :title="myTitle"
  :footer="{
    Cancel: () => isVisible = false,
    Ok: () => isVisible = false
  }"
  v-model:visible="isVisible"
>

  Content here
</v-ons-alert-dialog>

For higher control, it is also possible to use slots (can be combined with props):

<v-ons-alert-dialog modifier="rowfooter"
  v-model:visible="isVisible"
>
  <span v-slot:title>Title</span>

  Content here

  <template v-slot:footer>
    <v-ons-alert-dialog-button @click="isVisible = false">Cancel</v-ons-alert-dialog-button>
    <v-ons-alert-dialog-button @click="isVisible = false">Ok</v-ons-alert-dialog-button>
  </template>
</v-ons-alert-dialog>

The optional rowfooter modifier forces the buttons to be displayed on a single row rather than a column.

Notification methods

The $ons.notification object contains some useful methods to easily show alerts, confirmation dialogs and prompts:

$ons.notification.alert(message, options);
$ons.notification.confirm(message, options);
$ons.notification.prompt(message, options);

They all return a Promise object that can be used to handle the input from the user.

$ons.notification.confirm('Are you ready?')
  .then((response) => {
    // Handle response.
  });