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.

Editable Text Input

We can set the drawer placement with the placement prop.

For instance, we can write:

<template>
  <c-box>
    <c-editable default-value="Hello world" font-size="2xl">
      <c-editable-preview />
      <c-editable-input />
    </c-editable>
  </c-box>
</template>

<script>
import {
  CBox,
  CEditable,
  CEditableInput,
  CEditablePreview,
} from "@chakra-ui/vue";
export default {
  components: {
    CBox,
    CEditable,
    CEditableInput,
    CEditablePreview,
  },
};
</script>

We register the CEditable, CEditableInput, CEditablePreview components to add the editable text input.

CEditable is the main input wrapper.

CEditableInput is the input itself.

CEditablePreview has the preview of the inputted text.

We can add custom components for the input in place of the default ones.

To do this, we write:

<template>
  <c-box>
    <c-editable default-value="Hello World" font-size="2xl">
      <template v-slot="{ isEditing, onSubmit, onCancel, onRequestEdit }">
        <c-editable-preview />
        <c-editable-input />

        <c-flex mt="3">
          <c-button-group v-if="isEditing" size="sm">
            <c-icon-button icon="check" color="green"@click="onSubmit" />
            <c-icon-button icon="close"@click="onCancel" />
          </c-button-group>
          <c-icon-button v-else icon="edit" size="sm"@click="onRequestEdit" />
        </c-flex>
      </template>
    </c-editable>
  </c-box>
</template>

<script>
import {
  CBox,
  CEditable,
  CEditableInput,
  CEditablePreview,
  CFlex,
  CIconButton,
  CButtonGroup,
} from "@chakra-ui/vue";
export default {
  components: {
    CBox,
    CEditable,
    CEditableInput,
    CEditablePreview,
    CFlex,
    CIconButton,
    CButtonGroup,
  },
};
</script>

We populate the default slot with some buttons in a button group.

The slot props have the onSubmit method that’s run when we click the check button.

onCancel is run when we click the close button. It’ll set isEditing to false .

It’s called when we press the Esc key.

onRequestEdit is a function that sets isEditing to true .

It’s called when we press Enter.

Conclusion

We can add an editable text input 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.

Divider

Chakra UI Vue comes with a divider component.

To add it, we write:

<template>
  <c-box>
    <p>Part 1</p>
    <c-divider />
    <p>Part 2</p>
  </c-box>
</template>

<script>
import { CBox, CDivider } from "@chakra-ui/vue";
export default {
  components: {
    CBox,
    CDivider,
  },
};
</script>

to add a horizontal divider with the c-divider component.

We can also add a vertical divider with:

<template>
  <c-flex>
    <span>Part 1</span>
    <c-divider orientation="vertical" />
    <span>Part 2</span>
  </c-flex>
</template>

<script>
import { CFlex, CDivider } from "@chakra-ui/vue";
export default {
  components: {
    CFlex,
    CDivider,
  },
};
</script>

We just set orientation to vertical to add it.

And we can change the border color with the border-color prop:

<template>
  <c-box>
    <p>Part 1</p>
    <c-divider border-color="red.200" />
    <p>Part 2</p>
  </c-box>
</template>
<script>
import { CBox, CDivider } from "@chakra-ui/vue";
export default {
  components: {
    CBox,
    CDivider,
  },
};
</script>

Drawer

Chakra UI Vue comes with components to let us add a drawer into our Vue app.

To add it, we write:

<template>
  <c-box>
    <c-button ref="btnRef" @click="isOpen = true">Open Drawer</c-button>

    <c-drawer
      :isOpen="isOpen"
      placement="right"
      :on-close="close"
      :initialFocusRef="() => $refs.inputInsideModal"
    >
      <c-drawer-overlay />
      <c-drawer-content>
        <c-drawer-close-button />
        <c-drawer-header>Create your account</c-drawer-header>

         <c-drawer-body>
          <c-input ref="inputInsideModal" placeholder="Type here..." />
        </c-drawer-body>

        <c-drawer-footer>
          <c-button variant="outline" mr="3" @click="isOpen = false"
            >Cancel</c-button
          >
          <c-button variant-color="blue">Save</c-button>
        </c-drawer-footer>
      </c-drawer-content>
    </c-drawer>
  </c-box>
</template>
<script>
import {
  CBox,
  CInput,
  CButton,
  CDrawer,
  CDrawerBody,
  CDrawerFooter,
  CDrawerHeader,
  CDrawerOverlay,
  CDrawerContent,
  CDrawerCloseButton,
} from "@chakra-ui/vue";
export default {
  components: {
    CBox,
    CInput,
    CButton,
    CDrawer,
    CDrawerBody,
    CDrawerFooter,
    CDrawerHeader,
    CDrawerOverlay,
    CDrawerContent,
    CDrawerCloseButton,
  },
  data() {
    return {
      isOpen: false,
    };
  },
  methods: {
    close() {
      this.isOpen = false;
    },
  },
};
</script>

We import and register the CDrawer, CDrawerBody, CDrawerFooter, CDrawerHeader, CDrawerOverlay, CDrawerContent, and CDrawerCloseButton components to add a drawer.

CDrawer is the main drawer container.

CDrawerBody is the container for the drawer body.

CDrawerFooter is the container for the drawer footer.

CDrawerHeader is the container for the drawer header.

CDrawerOverlay is the drawer overlay.

CDrawerContent is the container for the drawer content.

CDrawerCloseButton is the drawer close button.

We set the isOpen prop to the isOpen reactive property to let us control when to open or close the drawer.

The c-button opens the drawer since isOpen is set to true when we click it.

initialFocusRef sets the element that we want to focus on initially when the drawer is opened.

placement sets the drawer placement. We can set it to top, right, bottom, or left .

Conclusion

We can add a divider and drawer 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.

Control Box

We can use the c-control-box component to add a component that changes styles based on a sibling checkbox or radio input.

For instance, we can write:

<template>
  <c-box>
     <label>
      <c-visually-hidden as="input" type="checkbox" default-checked />
      <c-control-box
        border-width="1px"
        size="24px"
        rounded="sm"
        :_checked="{ bg: 'green.500', color: 'white', borderColor: 'green.500' }""
        :_focus="{ borderColor: 'green.600', boxShadow: 'outline' }""
      >
        <c-icon name="check" size="16px" />
      </c-control-box>
      <c-box as="span" vertical-align="top" ml="3">
        Checkbox Label
      </c-box>
    </label>
  </c-box>
</template>

<script>
import { CBox, CControlBox, CIcon, CVisuallyHidden } from "@chakra-ui/vue";
export default {
  components: {
    CBox,
    CControlBox,
    CIcon,
    CVisuallyHidden,
  },
};
</script>

We have the c-control-box component with the _checked prop to set the bg and color props of the c-visually-hidden component when it’s toggled.

And we have the _focus prop to set the borderColor and boxShadow styles of c-visually-hidden when we focus on the checkbox by clicking it.

We can do the same with a radio button:

<template>
  <c-box>
    <label>
      <c-visually-hidden type="radio" as="input" />
      <c-control-box
        size="24px"
        bg="white"
        border="2px"
        rounded="full"
        type="radio"
        borderColor="inherit"
        :_focus="{ boxShadow: 'outline' }"
        :_hover="{ borderColor: 'gray.300' }"
        :_disabled="{ opacity: '40%' }"
        :_checked="{ bg: 'green.500', borderColor: 'green.500' }"
      >
        <c-box w="50%" h="50%" bg="white" rounded="full" />
      </c-control-box>
      <c-box as="span" ml="2" vertical-align="center" user-select="none">
        This is a Radio
      </c-box>
    </label>
  </c-box>
</template>

<script>
import { CBox, CControlBox, CVisuallyHidden } from "@chakra-ui/vue";
export default {
  components: {
    CBox,
    CControlBox,
    CVisuallyHidden,
  },
};
</script>

We have the _disabled prop to set the styles of c-visually-hidden when it’s disabled.

And we have the _hover prop to set the styles of c-visually-hidden when we hover over it.

Conclusion

We can use the c-control-box component to add a component that changes styles based on a sibling checkbox or radio input into our Vue app.

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.

Close Button

Chakra UI Vue comes with a close button component.

To add it, we write:

<template>
  <c-box> <c-close-button /> </c-box>
</template>

<script>
import { CBox, CCloseButton } from "@chakra-ui/vue";
export default {
  components: {
    CBox,
    CCloseButton,
  },
};
</script>

to add the c-close-button component.

And we can change its size with the size prop:

<template>
  <c-box> <c-close-button size="lg" /> </c-box>
</template>

<script>
import { CBox, CCloseButton } from "@chakra-ui/vue";
export default {
  components: {
    CBox,
    CCloseButton,
  },
};
</script>

Code Display

We can use the c-code component to add a code display into our Vue app.

For instance, we can write:

<template>
  <c-box> <c-code>Hello world</c-code></c-box>
</template>

<script>
import { CBox, CCode } from "@chakra-ui/vue";
export default {
  components: {
    CBox,
    CCode,
  },
};
</script>

to add text that’s displayed as code.

We can change the background with the variant-color prop:

<template>
  <c-box>
    <c-stack is-inline>
      <c-code>console.log(welcome)</c-code>
      <c-code variant-color="red">var chakra = 'awesome!'></c-code>
      <c-code variant-color="yellow">npm install chakra</c-code>
    </c-stack>
  </c-box>
</template>
<script>
import { CBox, CCode, CStack } from "@chakra-ui/vue";
export default {
  components: {
    CBox,
    CCode,
    CStack,
  },
};
</script>

Collapse

Chakra UI Vue comes with a collapse component.

To add it, we write:

<template>
  <c-box>
    <c-button mb="4" variant-color="blue" @click="show = !show">
      Toggle
    </c-button>
    <c-collapse :is-open="show">
      Anim pariatur cliche reprehenderit
    </c-collapse>
  </c-box>
</template>
<script>
import { CBox, CButton, CCollapse } from "@chakra-ui/vue";
export default {
  components: {
    CBox,
    CButton,
    CCollapse,
  },
  data() {
    return {
      show: false,
    };
  },
};
</script>

We have the c-button component that lets us click to toggle the show reactive property.

And we use show to control whether the c-collapse component is displayed by passing show as the value of the is-open prop.

We can set the height of the collapse component with its’ collapsed with the starting-height prop:

<template>
  <c-box>
    <c-button mb="4" variant-color="blue" @click="show = !show">
      Toggle
    </c-button>
    <c-collapse :is-open="show" :starting-height="20">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id
      magna in diam porttitor hendrerit quis ut quam. Aliquam et sem eget eros
      sodales pretium sit amet sit amet dolor.
    </c-collapse>
  </c-box>
</template>
<script>
import { CBox, CButton, CCollapse } from "@chakra-ui/vue";
export default {
  components: {
    CBox,
    CButton,
    CCollapse,
  },
  data() {
    return {
      show: false,
    };
  },
};
</script>

20 is in pixels.

Conclusion

We can add a close button, code display and collapse component 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.

Circular Progress Display

Chakra UI Vue comes with a circular progress component.

To add it, we can write:

<template>
  <c-box>
    <c-circular-progress :value="80" />
  </c-box>
</template>

<script>
import { CBox, CCircularProgress } from "@chakra-ui/vue";
export default {
  components: {
    CBox,
    CCircularProgress,
  },
};
</script>

to add the c-circular-progress component to add the circular progress display.

value is set to the progress value, which can be between 0 to 100.

We can change the size with the size prop:

<template>
  <c-box>
    <c-circular-progress :value="80" size="120px" />
  </c-box>
</template>

<script>
import { CBox, CCircularProgress } from "@chakra-ui/vue";
export default {
  components: {
    CBox,
    CCircularProgress,
  },
};
</script>

And we can change its color with the color prop:

<template>
  <c-box>
    <c-circular-progress :value="80" color="orange" size="120px" />
  </c-box>
</template>

<script>
import { CBox, CCircularProgress } from "@chakra-ui/vue";
export default {
  components: {
    CBox,
    CCircularProgress,
  },
};
</script>

Also, we can add the c-circular-progress-label component to add a label in the circular progress component:

<template>
  <c-box>
    <c-circular-progress :value="40" color="green">
      <c-circular-progress-label>40%</c-circular-progress-label>
    </c-circular-progress>
  </c-box>
</template>

<script>
import {
  CBox,
  CCircularProgress,
  CCircularProgressLabel,
} from "@chakra-ui/vue";
export default {
  components: {
    CBox,
    CCircularProgress,
    CCircularProgressLabel,
  },
};
</script>

To make it animate, we can use the is-determinate prop:

<template>
  <c-box>
    <c-circular-progress is-indeterminate />
  </c-box>
</template>

<script>
import { CBox, CCircularProgress } from "@chakra-ui/vue";
export default {
  components: {
    CBox,
    CCircularProgress,
  },
};
</script>

Conclusion

We can add a circular progress display into our Vue app with Chakar UI Vue.