UI Development with Chakra UI Vue — Alert Dialog

Chakra UI Vue is a UI framework made for Vue.js that lets us add good-looking UI components into our Vue app.

This article will look at how to get started with UI development with Chakra UI Vue.

Alert Dialog

Chakra UI Vue comes with an alert dialog component.

For instance, we can write:

<template>
  <div>
    <c-alert-dialog
      :is-open="isOpen"
      :least-destructive-ref="$refs.cancelRef"
      :on-close="closeDialog"
    >
      <c-alert-dialog-overlay />
      <c-alert-dialog-content>
        <c-alert-dialog-header font-size="lg" font-weight="bold">
          Delete Customer
        </c-alert-dialog-header>
        <c-alert-dialog-body>
          Are you sure? You can't undo this action afterwards.
        </c-alert-dialog-body>
        <c-alert-dialog-footer>
          <c-button ref="cancelRef" :mr="1" @click="closeDialog">
            Cancel
          </c-button>
          <c-button variantColor="red" @click="closeDialog" ml="3">
            Delete
          </c-button>
        </c-alert-dialog-footer>
      </c-alert-dialog-content>
    </c-alert-dialog>
    <c-button variant-color="red" @click="openDialog">
      Delete Customer
    </c-button>
  </div>
</template>

<script>
import {
  CAlertDialog,
  CAlertDialogHeader,
  CAlertDialogBody,
  CAlertDialogFooter,
  CAlertDialogOverlay,
  CAlertDialogContent,
  CButton,
} from "@chakra-ui/vue";

export default {
  components: {
    CAlertDialog,
    CAlertDialogHeader,
    CAlertDialogBody,
    CAlertDialogFooter,
    CAlertDialogOverlay,
    CAlertDialogContent,
    CButton,
  },
  data() {
    return {
      isOpen: false,
    };
  },
  methods: {
    closeDialog() {
      this.isOpen = false;
    },
    openDialog() {
      this.isOpen = true;
    },
  },
};
</script>

We register the CAlertDialog, CAlertDialogHeader, CAlertDialogBody, CAlertDialogFooter, CAlertDialogOverlay, and CAlertDialogContent components to add an alert dialog.

CAlertDialog is the main container.

CAlertDialogHeader is the alert dialog header.

CAlertDialogBody is the alert dialog body.

CAlertDialogFooter is the alert dialog footer.

CAlertDialogOverlay is the alert dialog overlay.

And CAlertDialogContent is the alert dialog content container.

We set the is-open prop to control when it’s opened.

It’s controlled by the closeDialog and openDialog methods, which are run when we click on Cancel and Delete Customer respectively.

The on-close prop is set to closeDialog so that we can close the form when we click away from the alert box.

Conclusion

We can add an alert dialog easily with Chakra UI Vue.