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.

Badge

We can add badges with Chakra UI Vue.

To do this, we write:

<template>  
  <c-box>  
    <c-badge>Default</c-badge>  
  </c-box>  
</template>  
<script>  
import { CBadge, CBox } from "@chakra-ui/vue";  
export default {  
  components: {  
    CBadge,  
    CBox,  
  },  
};  
</script>

We add the CBadge component to add a badge.

Also, we can use the mx prop to add margins to all sides and the variant-color prop to add a color scheme to the badge:

<template>  
  <c-box>  
    <c-badge mx="2" variant-color="green">Default</c-badge>  
  </c-box>  
</template>  
<script>  
import { CBadge, CBox } from "@chakra-ui/vue";  
export default {  
  components: {  
    CBadge,  
    CBox,  
  },  
};  
</script>

Also, we can put the badge inside a CText component to add the badge beside the text:

<template>  
  <c-box>  
    <c-text font-weight="bold">  
      Jonathan  
      <c-badge :mt="-1" font-size="1em" variant-color="green"> New </c-badge>  
    </c-text>  
  </c-box>  
</template>  
<script>  
import { CBadge, CBox, CText } from "@chakra-ui/vue";  
export default {  
  components: {  
    CBadge,  
    CBox,  
    CText,  
  },  
};  
</script>

The font-size prop sets the font size of the content.

Conclusion

We can add a badge 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.

Avatars

Chakra UI Vue comes with an avatar component.

For instance, we can write:

<template>
  <c-box>
    <c-avatar name="dog" src="https://picsum.photos/id/237/200" />
  </c-box>
</template>
<script>
import { CAvatar, CBox } from "@chakra-ui/vue";
export default {
  components: {
    CAvatar,
    CBox,
  },
};
</script>

to register the CAvatar component to add an avatar image.

The src prop has the URL of the image.

name has the text description of the image.

We can set the size prop to set its size.

The possible values are 2xs, xs, sm, md, lg xl and 2xl , with 2xs being the smallest and 2xl being the largest.

So we can write:

<template>
  <c-box>
    <c-avatar size="lg" name="dog" src="https://picsum.photos/id/237/200" />
  </c-box>
</template>
<script>
import { CAvatar, CBox } from "@chakra-ui/vue";
export default {
  components: {
    CAvatar,
    CBox,
  },
};
</script>

to make the avatar bigger than the default.

We can add a badge to the bottom right corner of the avatar with the CAvatarBagde component:

<template>
  <c-box>
    <c-avatar size="lg" name="dog" src="https://picsum.photos/id/237/200">
      <c-avatar-badge size="1.0em" bg="green.500" />
    </c-avatar>
  </c-box>
</template>
<script>
import { CAvatar, CAvatarBadge, CBox } from "@chakra-ui/vue";
export default {
  components: {
    CAvatar,
    CAvatarBadge,
    CBox,
  },
};
</script>

size sets the size and bg sets the background color.

Conclusion

We can add an avatar easily 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.

Aspect Ratio Box

We can use the CAspectRatioBox component to add a container that maintains its aspect ratio when we resize it.

For instance, we can write:

<template>
  <c-box>
    <c-aspect-ratio-box max-w="560px" :ratio="1">
      <c-box
        as="iframe"
        title="naruto"
        src="https://www.youtube.com/embed/QhBnZ6NPOY0"
        allow-full-screen
      />
    </c-aspect-ratio-box>
  </c-box>
</template>

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

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

We register the CAspectRatioBox component to add it.

Then we set the ratio prop to the aspect ratio we want.

max-w is the max-width of the container.

We add a c-box with the as prop set to iframe and src set to a YouTube video URL to embed a video.

To add an image, we can write:

<template>
  <c-box>
    <c-aspect-ratio-box max-w="560px" :ratio="1">
      <c-image src="https://picsum.photos/200" alt="image" object-fit="cover" />
    </c-aspect-ratio-box>
  </c-box>
</template>

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

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

We just put a c-image component inside the c-aspect-ratio-box to make the image maintain its aspect ratio.

Conclusion

We can add the c-aspect-ratio-box component to add a container than maintains the aspect ratio of the contents inside 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.

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.

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

We can add an alert box into our Vue app with Chakra UI Vue.

To add it, we write:

<template>
  <c-alert status="error">
    <c-alert-icon />
    <c-alert-title :mr="2">Your browser is outdated!</c-alert-title>
    <c-alert-description> Your experience may be degraded.</c-alert-description>
    <c-close-button position="absolute" right="8px" top="8px" />
  </c-alert>
</template>

<script>
import {
  CAlert,
  CAlertIcon,
  CAlertTitle,
  CAlertDescription,
} from "@chakra-ui/vue";

export default {
  name: "App",
  components: {
    CAlert,
    CAlertIcon,
    CAlertTitle,
    CAlertDescription,
  },
};
</script>

We register the CAlert, CAlertIcon, CAlertTitle, and CAlertDescription components.

CAlert is the main container.

CAlertIcon is the alert box icon.

CAlertTitle is the alert box title.

CAlertDescription is the alert box content.

status is set to 'error' makes the box and icon red.

We can also set it to info to make them blue, success to make them green, or warning to make them yellow.

Also, we can set the variant prop to change the shade of the colors.

For instance, we can write:

<template>
  <c-alert status="error" variant="solid">
    <c-alert-icon />
    <c-alert-title :mr="2">Your browser is outdated!</c-alert-title>
    <c-alert-description> Your experience may be degraded.</c-alert-description>
    <c-close-button position="absolute" right="8px" top="8px" />
  </c-alert>
</template>

<script>
import {
  CAlert,
  CAlertIcon,
  CAlertTitle,
  CAlertDescription,
} from "@chakra-ui/vue";

export default {
  name: "App",
  components: {
    CAlert,
    CAlertIcon,
    CAlertTitle,
    CAlertDescription,
  },
};
</script>

to set variant to solid to make the background color redder.

We can also set it to subtle to make it more subtle, left-accent adds a darker color to the left side.

top-accent adds a darker color to the top.

We can add props to add flexbox layout to our alert box.

For instance, we can write:

<template>
  <c-alert
    status="error"
    flexDirection="column"
    justifyContent="center"
    textAlign="center"
    height="200px"
  >
    <c-alert-icon />
    <c-alert-title :mr="2">Your browser is outdated!</c-alert-title>
    <c-alert-description> Your experience may be degraded.</c-alert-description>
    <c-close-button position="absolute" right="8px" top="8px" />
  </c-alert>
</template>

<script>
import {
  CAlert,
  CAlertIcon,
  CAlertTitle,
  CAlertDescription,
} from "@chakra-ui/vue";

export default {
  name: "App",
  components: {
    CAlert,
    CAlertIcon,
    CAlertTitle,
    CAlertDescription,
  },
};
</script>

flexDirection sets the flex-direction CSS property.

justifyContent sets the justify-content CSS property.

textAlign sets the text-align CSS property.

Conclusion

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