UI Development with Chakra UI Vue — Modals

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.

Modal

We can add a modal with Chakra UI Vue.

To add one, we write:

<template>
  <c-box>
    <c-button
      left-icon="check"
      mb="3"
      variant-color="blue"
      @click="open"
      variant="outline"
    >
      Open Modal
    </c-button>
    <c-modal :is-open="isOpen" :on-close="close">
      <c-modal-content ref="content">
        <c-modal-header>Modal Title</c-modal-header>
        <c-modal-close-button />
        <c-modal-body>
          <Lorem add="2s" />
        </c-modal-body>
        <c-modal-footer>
          <c-button variant-color="blue" mr="3"> Save </c-button>
          <c-button @click="close">Cancel</c-button>
        </c-modal-footer>
      </c-modal-content>
      <c-modal-overlay />
    </c-modal>
  </c-box>
</template>

<script>
import {
  CBox,
  CButton,
  CModal,
  CModalOverlay,
  CModalContent,
  CModalHeader,
  CModalFooter,
  CModalBody,
  CModalCloseButton,
} from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CButton,
    CModal,
    CModalOverlay,
    CModalContent,
    CModalHeader,
    CModalFooter,
    CModalBody,
    CModalCloseButton,
  },
  data() {
    return {
      isOpen: false,
    };
  },
  methods: {
    open() {
      this.isOpen = true;
    },
    close() {
      this.isOpen = false;
    },
  },
};
</script>

We register the components that are needed to create the modal.

CModalis the wrapper that provides context for its children

CModalOverlayis the dimmed overlay behind the modal dialog

CModalContentis the container for the modal dialog’s content

CModalHeaderis the header that labels the modal dialog

CModalFooter is the footer that houses the modal actions

CModalBodyis the wrapper that houses the modal’s main content

And CModalCloseButtonis the button that closes the modal.

We set the is-open prop to a reactive property to let us control when the modal is open.

The on-close prop takes a method that runs when we close the modal by clicking outside it.

We can set the initial-focus-ref prop to a function that returns the ref of the element to focus on when we open the modal.

And we can set the final-focus-ref prop to a function that returns the ref of the element to focus on when we close the modal.

For instance, we can write:

<template>
  <c-box>
    <c-button mr="3" @click="open">Open Modal</c-button>
    <c-button ref="finalRef"> I'll receive focus on close </c-button>
    <c-modal
      :initial-focus-ref="() => $refs.initialRef"
      :final-focus-ref="() => $refs.finalRef"
      :is-open="isOpen"
      :on-close="close"
    >
      <c-modal-content ref="content">
        <c-modal-header>Create your account</c-modal-header>
        <c-modal-close-button />
        <c-modal-body mr="8">
          <c-form-control>
            <c-form-label>First name</c-form-label>
            <c-input ref="initialRef" placeholder="First name" />
          </c-form-control>

          <c-form-control mt="4">
            <c-form-label>Last name</c-form-label>
            <c-input placeholder="Last name" />
          </c-form-control>
        </c-modal-body>
        <c-modal-footer>
          <c-button variant-color="blue" mr="3"> Cancel </c-button>
          <c-button @click="close">Save</c-button>
        </c-modal-footer>
      </c-modal-content>
      <c-modal-overlay />
    </c-modal>
  </c-box>
</template>

<script>
import {
  CBox,
  CButton,
  CModal,
  CModalOverlay,
  CModalContent,
  CModalHeader,
  CModalFooter,
  CModalBody,
  CModalCloseButton,
  CInput,
  CFormControl,
  CFormLabel,
} from "[@chakra](https://medium.com/r/?url=http%3A%2F%2Ftwitter.com%2Fchakra "Twitter profile for @chakra")-ui/vue";

export default {
  components: {
    CBox,
    CButton,
    CModal,
    CModalOverlay,
    CModalContent,
    CModalHeader,
    CModalFooter,
    CModalBody,
    CModalCloseButton,
    CInput,
    CFormControl,
    CFormLabel,
  },
  data() {
    return {
      isOpen: false,
    };
  },
  methods: {
    open() {
      this.isOpen = true;
    },
    close() {
      this.isOpen = false;
    },
  },
};
</script>

so that the First name field is focused when we open the modal.

And when the modal is closed, the “I’ll receive focus on close” button will be focused on.

Conclusion

We can add a modal into our Vue app with Chakra UI Vue.