Category: Chakra UI Vue

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.

Number Input Styles

We can change the button styles of the number input.

To do this, we write:

<template>
  <c-box>
    <c-number-input size="sm" :default-value="15" clamp-value-on-blur :max="30">
      <c-number-input-field focus-border-color="red.200" />
      <c-number-input-stepper>
        <c-number-increment-stepper
          bg="green.200"
          :_active="{ bg: 'green.300' }"
        >
          +
        </c-number-increment-stepper>
        <c-number-decrement-stepper bg="pink.200" :_active="{ bg: 'pink.300' }">
          -
        </c-number-decrement-stepper>
      </c-number-input-stepper>
    </c-number-input>
  </c-box>
</template>

<script>
import {
  CBox,
  CNumberInput,
  CNumberInputField,
  CNumberInputStepper,
  CNumberIncrementStepper,
  CNumberDecrementStepper,
} from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CNumberInput,
    CNumberInputField,
    CNumberInputStepper,
    CNumberIncrementStepper,
    CNumberDecrementStepper,
  },
  data() {
    return {
      value: 15,
    };
  },
};
</script>

We set the bg prop to set the background color of the stepper buttons.

_active prop sets the styles that are applied when the buttons are active.

Popover

We can add a popover with the c-popover component.

For instance, we can write:

<template>
  <c-box>
    <c-popover placement="top">
      <c-popover-trigger>
        <c-button>Trigger</c-button>
      </c-popover-trigger>
      <c-popover-content z-index="4">
        <c-popover-arrow />
        <c-popover-close-button />
        <c-popover-header>Confirmation!</c-popover-header>
        <c-popover-body>
          Are you sure you want to have that milkshake?
        </c-popover-body>
      </c-popover-content>
    </c-popover>
  </c-box>
</template>

<script>
import {
  CBox,
  CButton,
  CPopover,
  CPopoverTrigger,
  CPopoverContent,
  CPopoverHeader,
  CPopoverBody,
  CPopoverArrow,
  CPopoverCloseButton,
} from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CButton,
    CPopover,
    CPopoverTrigger,
    CPopoverContent,
    CPopoverHeader,
    CPopoverBody,
    CPopoverArrow,
    CPopoverCloseButton,
  },
};
</script>

We add the popover with a few components.

c-popover is the main container.

c-popover-trigger has the button that triggers the popover.

c-popover-content is the container for the popover content.

c-popover-arrow is the popover arrow.

c-popover-close-button is the popover close button.

c-popover-header is the popover header.

c-popover-body is th container for the main popover content.

We can get the state of the popover with some slot props:

<template>
  <c-box>
    <c-popover
      initialFocusRef="#closeButton"
      placement="right"
      v-slot="{ isOpen, onClose }"
    >
      <c-popover-trigger>
        <c-button>Click to {{ isOpen ? "close" : "open" }}</c-button>
      </c-popover-trigger>
      <c-popover-content z-index="4">
        <c-popover-arrow />
        <c-popover-close-button />
        <c-popover-header>Confirmation!</c-popover-header>
        <c-popover-body>
          <c-box>
            Hello. Nice to meet you! This is the body of the popover
          </c-box>
          <c-button
            mt="4"
            variantColor="blue"
            @click="onClose"
            id="closeButton"
          >
            Close
          </c-button>
        </c-popover-body>
      </c-popover-content>
    </c-popover>
  </c-box>
</template>

<script>
import {
  CBox,
  CButton,
  CPopover,
  CPopoverTrigger,
  CPopoverContent,
  CPopoverHeader,
  CPopoverBody,
  CPopoverArrow,
  CPopoverCloseButton,
} from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CButton,
    CPopover,
    CPopoverTrigger,
    CPopoverContent,
    CPopoverHeader,
    CPopoverBody,
    CPopoverArrow,
    CPopoverCloseButton,
  },
};
</script>

isOpen is true when the popover is open.

onClose is a function that closes the popover when we run it.

Conclusion

We can add number inputs and popovers with Chakra Vue UI.

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.

Slider

We can add a slider with the c-slider component.

For instance, we can write:

<template>
  <c-box>
    <c-slider :max="20" @change="handleChange" :value="value">
      <c-slider-track />
      <c-slider-filled-track />
      <c-slider-thumb />
    </c-slider>
  </c-box>
</template>

<script>
import {
  CBox,
  CSlider,
  CSliderTrack,
  CSliderThumb,
  CSliderFilledTrack,
} from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CSlider,
    CSliderTrack,
    CSliderThumb,
    CSliderFilledTrack,
  },
  data() {
    return {
      value: 15,
    };
  },
  methods: {
    handleChange(val) {
      this.value = val;
    },
  },
};
</script>

We set the value prop to set its value.

The max prop set the max allowed value.

@change is set to a function that updates the value .

c-slider-track has the empty part of the slider track.

c-slider-filled-track has the filled part of the slider track.

c-slider-thumb has the slider button.

We can change the slider color with the color prop:

<template>
  <c-box>
    <c-slider color="pink" :max="20" @change="handleChange" :value="value">
      <c-slider-track />
      <c-slider-filled-track />
      <c-slider-thumb />
    </c-slider>
  </c-box>
</template>

<script>
import {
  CBox,
  CSlider,
  CSliderTrack,
  CSliderThumb,
  CSliderFilledTrack,
} from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CSlider,
    CSliderTrack,
    CSliderThumb,
    CSliderFilledTrack,
  },
  data() {
    return {
      value: 15,
    };
  },
  methods: {
    handleChange(val) {
      this.value = val;
    },
  },
};
</script>

Conclusion

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

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.

Number Input

We can add a numeric input with Chakra UI Vue.

To do this, we write:

<template>
  <c-box>
    <c-number-input>
      <c-number-input-field />
      <c-number-input-stepper>
        <c-number-increment-stepper />
        <c-number-decrement-stepper />
      </c-number-input-stepper>
    </c-number-input>
  </c-box>
</template>

<script>
import {
  CBox,
  CNumberInput,
  CNumberInputField,
  CNumberInputStepper,
  CNumberIncrementStepper,
  CNumberDecrementStepper,
} from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CNumberInput,
    CNumberInputField,
    CNumberInputStepper,
    CNumberIncrementStepper,
    CNumberDecrementStepper,
  },
};
</script>

c-number-input is the container for the input.

c-number-input-field is the numeric input itself.

c-number-input-stepper is the container for the increment and decrement buttons.

c-number-increment-stepper is the increment button.

c-number-decrement-stepper is the decrement button.

We can bind the entered value to a reactive property with v-model :

<template>
  <c-box>
    <c-number-input v-model="value">
      <c-number-input-field />
      <c-number-input-stepper>
        <c-number-increment-stepper />
        <c-number-decrement-stepper />
      </c-number-input-stepper>
    </c-number-input>
  </c-box>
</template>

<script>
import {
  CBox,
  CNumberInput,
  CNumberInputField,
  CNumberInputStepper,
  CNumberIncrementStepper,
  CNumberDecrementStepper,
} from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CNumberInput,
    CNumberInputField,
    CNumberInputStepper,
    CNumberIncrementStepper,
    CNumberDecrementStepper,
  },
  data() {
    return {
      value: 15,
    };
  },
};
</script>

And we can set the max and min values allowed with the max and min props respectively:

<template>
  <c-box>
    <c-number-input v-model="value" :max="20" :min="10">
      <c-number-input-field />
      <c-number-input-stepper>
        <c-number-increment-stepper />
        <c-number-decrement-stepper />
      </c-number-input-stepper>
    </c-number-input>
  </c-box>
</template>

<script>
import {
  CBox,
  CNumberInput,
  CNumberInputField,
  CNumberInputStepper,
  CNumberIncrementStepper,
  CNumberDecrementStepper,
} from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CNumberInput,
    CNumberInputField,
    CNumberInputStepper,
    CNumberIncrementStepper,
    CNumberDecrementStepper,
  },
  data() {
    return {
      value: 15,
    };
  },
};
</script>

The number of decimal place of the number can be set with the precision prop:

<template>
  <c-box>
    <c-number-input :precision="2" v-model="value" :max="20" :min="10">
      <c-number-input-field type="number" />
      <c-number-input-stepper>
        <c-number-increment-stepper />
        <c-number-decrement-stepper />
      </c-number-input-stepper>
    </c-number-input>
  </c-box>
</template>

<script>
import {
  CBox,
  CNumberInput,
  CNumberInputField,
  CNumberInputStepper,
  CNumberIncrementStepper,
  CNumberDecrementStepper,
} from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CNumberInput,
    CNumberInputField,
    CNumberInputStepper,
    CNumberIncrementStepper,
    CNumberDecrementStepper,
  },
  data() {
    return {
      value: 15,
    };
  },
};
</script>

The clamp-value-on-blur prop resets the value to the nearest min or max when we remove focus from the input:

<template>
  <c-box>
    <c-number-input clamp-value-on-blur v-model="value" :max="20" :min="10">
      <c-number-input-field type="number" />
      <c-number-input-stepper>
        <c-number-increment-stepper />
        <c-number-decrement-stepper />
      </c-number-input-stepper>
    </c-number-input>
  </c-box>
</template>

<script>
import {
  CBox,
  CNumberInput,
  CNumberInputField,
  CNumberInputStepper,
  CNumberIncrementStepper,
  CNumberDecrementStepper,
} from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CNumberInput,
    CNumberInputField,
    CNumberInputStepper,
    CNumberIncrementStepper,
    CNumberDecrementStepper,
  },
  data() {
    return {
      value: 15,
    };
  },
};
</script>

Conclusion

We can add a number input with Chakra UI Vue.

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.

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.

Menu

The c-menu component lets us add a menu into our Vue app.

To add it, we write:

<template>
  <c-box>
    <c-menu>
      <c-menu-button right-icon="chevron-down"> Actions </c-menu-button>
      <c-menu-list>
        <c-menu-item>Download</c-menu-item>
        <c-menu-item>Create a Copy</c-menu-item>
        <c-menu-item>Mark as Draft</c-menu-item>
        <c-menu-item>Delete</c-menu-item>
        <c-menu-item as="a" href="#"> Attend a Workshop </c-menu-item>
      </c-menu-list>
    </c-menu>
  </c-box>
</template>

<script>
import {
  CBox,
  CMenu,
  CMenuButton,
  CMenuList,
  CMenuItem,
  CMenuGroup,
  CMenuDivider,
  CMenuOptionGroup,
  CMenuItemOption,
} from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CMenu,
    CMenuButton,
    CMenuList,
    CMenuItem,
    CMenuGroup,
    CMenuDivider,
    CMenuOptionGroup,
    CMenuItemOption,
  },
};
</script>

We register the CMenu, CMenuButton, CMenuList, CMenuItemcomponents to add the menu.

CMenu is the main menu container.

CMenuButton is the button to toggle the menu on and off.

CMenuList is the menu list container.

right-icon sets the icon to display to the right of the menu text.

We can group menu items with the c-menu-group component:

<template>
  <c-box>
    <c-menu>
      <c-menu-button right-icon="chevron-down" variant-color="pink">
        Profile
      </c-menu-button>
      <c-menu-list>
        <c-menu-group title="Profile">
          <c-menu-item>My Account</c-menu-item>
          <c-menu-item>Payments </c-menu-item>
        </c-menu-group>
        <c-menu-divider />
        <c-menu-group title="Help">
          <c-menu-item>Docs</c-menu-item>
          <c-menu-item>FAQ</c-menu-item>
        </c-menu-group>
      </c-menu-list>
    </c-menu>
  </c-box>
</template>

<script>
import {
  CBox,
  CMenu,
  CMenuButton,
  CMenuList,
  CMenuItem,
  CMenuGroup,
  CMenuDivider,
  CMenuOptionGroup,
  CMenuItemOption,
} from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CMenu,
    CMenuButton,
    CMenuList,
    CMenuItem,
    CMenuGroup,
    CMenuDivider,
    CMenuOptionGroup,
    CMenuItemOption,
  },
};
</script>

variant-color sets the background color of the menu button.

c-menu-divider is the menu group divider.

title is displayed as the heading of the group.

Conclusion

We can add a menu easily with Chakra UI Vue.