Author: John Au-Yeung

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.

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.

Link

We can add a link into our Vue app with the c-link component.

For instance, we can write:

<template>
  <c-box>
    <c-link href="https://vue.chakra-ui.com" is-external>
      Chakra Design system <c-icon name="external-link" mx="2px" />
    </c-link>
  </c-box>
</template>

<script>
import { CBox, CLink, CIcon } from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CLink,
    CIcon,
  },
};
</script>

is-external lets us make the link link outside the app.

href has the URL to go to.

We can set the color prop to change the link color:

<template>
  <c-box>
    <c-link href="https://vue.chakra-ui.com" is-external color="green.500">
      Chakra Design system
    </c-link>
  </c-box>
</template>

<script>
import { CBox, CLink } from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CLink,
  },
};
</script>

We can also render the link as a Vue Router router-link or Nuxt nuxt-link by setting the as prop to those values.

List

We can use the c-list component to render a list.

For instance, we can write:

<template>
  <c-box>
    <c-list styleType="disc">
      <c-list-item>Lorem ipsum dolor sit amet</c-list-item>
      <c-list-item>Consectetur adipiscing elit</c-list-item>
      <c-list-item>Integer molestie lorem at massa</c-list-item>
      <c-list-item>Facilisis in pretium nisl aliquet</c-list-item>
    </c-list>
  </c-box>
</template>

<script>
import { CBox, CList, CListItem } from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CList,
    CListItem,
  },
};
</script>

to add a list.

styleType sets the bullet type.

Also, we can add the c-list-icon component to change the list item icon:

<template>
  <c-box>
    <c-list spacing="3">
      <c-list-item>
        <c-list-icon icon="check-circle" color="green.500" />
        Lorem ipsum dolor sit amet, consectetur adipisicing elit
      </c-list-item>
      <c-list-item>
        <c-list-icon icon="check-circle" color="green.500" />
        Assumenda, quia temporibus eveniet a libero incidunt suscipit
      </c-list-item>
      <c-list-item>
        <c-list-icon icon="check-circle" color="green.500" />
        Quidem, ipsam illum quis sed voluptatum quae eum fugit earum
      </c-list-item>
      <c-list-item>
        <c-list-icon icon="settings" color="green.500" />
        Quidem, ipsam illum quis sed voluptatum quae eum fugit earum
      </c-list-item>
    </c-list>
  </c-box>
</template>

<script>
import { CBox, CList, CListItem, CListIcon } from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CList,
    CListItem,
    CListIcon,
  },
};
</script>

And we can change the tag the list is rendered as with the as prop:

<template>
  <c-box>
    <c-list as="ol" style-type="decimal">
      <c-list-item>Lorem ipsum dolor sit amet</c-list-item>
      <c-list-item>Consectetur adipiscing elit</c-list-item>
      <c-list-item>Integer molestie lorem at massa</c-list-item>
      <c-list-item>Facilisis in pretium nisl aliquet</c-list-item>
    </c-list>
  </c-box>
</template>

<script>
import { CBox, CList, CListItem } from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CList,
    CListItem,
  },
};
</script>

Conclusion

We can add links and lists easily 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.

Elements in Inputs

We can add elements in inputs with the c-input-left-element or c-input-right-element components.

c-input-left-element adds an element on the left side of the input.

And c-input-right-element adds an element on the right side of the input.

For instance, we can write:

<template>
  <c-box>
    <c-input-group size="md">
      <c-input
        pr="4.5rem"
        :type="show ? 'text' : 'password'"
        placeholder="Enter password"
        v-model="password"
      />
      <c-input-right-element width="4.5rem">
        <c-button h="1.75rem" size="sm" @click="show = !show">
          {{ show ? "Hide" : "Show" }}
        </c-button>
      </c-input-right-element>
    </c-input-group>
  </c-box>
</template>

<script>
import {
  CBox,
  CInputGroup,
  CInput,
  CInputRightElement,
  CButton,
} from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CInputGroup,
    CInput,
    CInputRightElement,
    CButton,
  },
  data() {
    return {
      password: "",
      show: false,
    };
  },
};
</script>

to add a Show button on the right side of the input to let users see what password they entered.

Input Focus and Error

We can set the focus-border-color prop to set the border color when we focus on the input.

For instance, we can write:

<template>
  <c-box>
    <c-input
      focus-border-color="lime"
      placeholder="Here is a sample placeholder"
    />
  </c-box>
</template>

<script>
import { CBox, CInput } from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CInput,
  }
};
</script>

to set the border color to lime when we focus on it.

We can add the is-invalid prop to show the user that the input is invalid.

And we can set the error-border-color to set the border color of the input when the input is invalid.

For example, we can write:

<template>
  <c-box>
    <c-input
      is-invalid
      error-border-color="red.300"
      placeholder="Here is a sample placeholder"
    />
  </c-box>
</template>

<script>
import { CBox, CInput } from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CInput,
  },
};
</script>

to add the props.

Conclusion

We can add inputs with various styles with Chakra UI Vue.