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.

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.

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.

Checkbox

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

For instance, we can write:

<template>
  <c-box>
    <c-checkbox default-is-checked>Checkbox</c-checkbox>
  </c-box>
</template>

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

We set the defualt-is-checked prop to make it checked by default.

Also, we can disable the checkbox with the is-disabled prop:

<template>
  <c-box>
    <c-checkbox is-disabled>Checkbox</c-checkbox>
  </c-box>
</template>

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

To change the color of the checkbox, we can set the variant-color prop:

<template>
  <c-box>
    <c-checkbox variant-color="red" default-is-checked> Checkbox </c-checkbox>
  </c-box>
</template>

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

We can change the size of the checkbox with the size prop:

<template>
  <c-box>
    <c-checkbox size="lg" variant-color="red" default-is-checked>
      Checkbox
    </c-checkbox>
  </c-box>
</template>

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

The is-indeterminate prop lets us set the checkbox to an indeterminate state:

<template>
  <c-box>
    <c-checkbox is-indeterminate> Checkbox </c-checkbox>
  </c-box>
</template>

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

To add a checkbox group, we can use the c-checkbox-group component:

<template>
  <c-box>
    <c-checkbox-group variant-color="green" :default-value="['apple', 'grape']">
      <c-checkbox value="apple">apple</c-checkbox>
      <c-checkbox value="orange">orange</c-checkbox>
      <c-checkbox value="grape">grape</c-checkbox>
    </c-checkbox-group>
  </c-box>
</template>

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

We add the default-value prop to set the checkbox with the given value prop value by default.

Conclusion

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

Button

Chakra UI Vue comes with a button component.

To add it, we add the CButton component.

For instance, we can write:

<template>
  <c-box>
    <c-button variant-color="green">Button</c-button>
  </c-box>
</template>

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

We set the variant-color prop to set its background color.

To set the size of the button, we can set the size prop:

<template>
  <c-box>
    <c-button variant-color="green" size="lg">Button</c-button>
  </c-box>
</template>

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

lg stands for large.

We can also set it to xs for extra small, sm for small, or md for medium.

To change the look of the button, we can set the variant prop:

<template>
  <c-box>
    <c-button variant-color="green" variant="outline">Button</c-button>
  </c-box>
</template>

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

We set variant to outline to make the button have outlined style.

We can also set it to solid , ghost or link .

ghost adds a background color to the button only when we hover over it.

Also, we can add an icon in the button with:

<template>
  <c-box>
    <c-button left-icon="email" variant-color="blue" variant="solid">
      Email
    </c-button>
  </c-box>
</template>

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

left-icon sets the name of the icon to add.

We can make the button display a loading state with the isLoading prop.

loading-text has the button text to show when the button is in the loading state:

<template>
  <c-box>
    <c-button
      isLoading
      loading-text="Submitting"
      variant-color="blue"
      variant="solid"
    >
      Email
    </c-button>
  </c-box>
</template>

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

We can set other props to style the button.

To do this, we write:

<template>
  <c-box>
    <c-button height="50px" width="250px" border="2px" border-color="green.500">
      Email
    </c-button>
  </c-box>
</template>

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

We set the height , width , border , and border-color props to set the corresponding CSS properties.

Conclusion

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

Breadcrumbs

Chakra UI Vue comes with a breadcrumb component we can use to add navigation.

To add it, we write:

<template>
  <c-box maxW="sm" border-width="1px" rounded="lg" overflow="hidden">
    <c-breadcrumb :add-separator="false">
      <c-breadcrumb-item>
        <c-breadcrumb-link href="/google">Breadcrumb 1</c-breadcrumb-link>
        <c-breadcrumb-separator
          color="tomato"
          font-size="10px"
          font-weight="bold"
        />
      </c-breadcrumb-item>

<c-breadcrumb-item>
        <c-breadcrumb-link href="/yahoo">Breadcrumb 2</c-breadcrumb-link>
        <c-breadcrumb-separator color="firebrick" font-size="20px" />
      </c-breadcrumb-item>

      <c-breadcrumb-item isCurrentPage>
        <c-breadcrumb-link href="/about">Breadcrumb 2</c-breadcrumb-link>
      </c-breadcrumb-item>
    </c-breadcrumb>
  </c-box>
</template>

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

We register the CBreadcrumb, CBreadcrumbItem, CBreadcrumbLink, and CBreadcrumbSeparator components to add breadcrumbs into our app.

CBreadcrumb is the main container.

CBreadcrumbItem is the container for a breadcrumb item.

CBreadcrumbLink is a breadcrumb link component.

And CBreadcrumbSeparator is the breadcrumb item separator.

href has the URL to go to when we click on the link.

If we use Vue Router or Nuxt, we can as the as prop to router-link or nuxt-link respectively.

And we set the URL with the to prop instead of href .

Conclusion

We can add breadcrumbs into our Vue app with Chakra UI Vue.