Category: 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.

Icon

We can add an icon with the c-icon prop.

For instance, we can write:

<template>
  <c-box>
    <c-icon name="phone" :mr="2" />
    <c-icon name="check-circle" size="24px" :mr="2" />
    <c-icon name="warning" size="32px" color="red.500" :mr="2" />
  </c-box>
</template>

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

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

name sets the name of the icon to display.

size has the size.

color has the color.

We can also add 3rd party icons with c-icon .

To do this, we write:

main.js

import Vue from "vue";
import Chakra, { CThemeProvider } from "@chakra-ui/vue";
import { faGlobeAfrica } from "@fortawesome/free-solid-svg-icons";

import App from "./App.vue";
Vue.use(Chakra, {
  icons: {
    iconPack: "fa",
    iconSet: {
      faGlobeAfrica
    }
  }
});

Vue.config.productionTip = false;

new Vue({
  render: (h) => h(CThemeProvider, [h(App)])
}).$mount("#app");

App.vue

<template>
  <c-box>
    <c-icon name="globe-africa" />
  </c-box>
</template>

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

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

We install the @fortawesome/free-solid-svg-icons package and add some options into the 2nd argument of Vue.use .

iconPack sets the icon pack to use.

iconSet has the icon we want to use.

Then we set name to show the icon in App.vue .

To add a custom icon, we can add our icons to the Chakra UI options.

To do this, we write:

main.js

import Vue from "vue";
import Chakra, { CThemeProvider } from "@chakra-ui/vue";
import App from "./App.vue";

const customIcons = {
  fortranIcon: {
    path: `
      <path d="M19.536 0H4.464A4.463 4.463 0 0 0 0 4.464v15.073A4.463 4.463 0 0 0 4.464 24h15.073A4.463 4.463 0 0 0 24 19.536V4.464A4.463 4.463 0 0 0 19.536 0zm1.193 6.493v3.871l-.922-.005c-.507-.003-.981-.021-1.052-.041-.128-.036-.131-.05-.192-.839-.079-1.013-.143-1.462-.306-2.136-.352-1.457-1.096-2.25-2.309-2.463-.509-.089-2.731-.176-4.558-.177L10.13 4.7v5.82l.662-.033c.757-.038 1.353-.129 1.64-.252.306-.131.629-.462.781-.799.158-.352.262-.815.345-1.542.033-.286.07-.572.083-.636.024-.116.028-.117 1.036-.117h1.012v9.3h-2.062l-.035-.536c-.063-.971-.252-1.891-.479-2.331-.311-.601-.922-.871-2.151-.95a11.422 11.422 0 0 1-.666-.059l-.172-.027.02 2.926c.021 3.086.03 3.206.265 3.465.241.266.381.284 2.827.368.05.002.065.246.065 1.041v1.039H3.271v-1.039c0-.954.007-1.039.091-1.041.05-.001.543-.023 1.097-.049.891-.042 1.033-.061 1.244-.167a.712.712 0 0 0 .345-.328c.106-.206.107-.254.107-6.78 0-6.133-.006-6.584-.09-6.737a.938.938 0 0 0-.553-.436c-.104-.032-.65-.07-1.215-.086l-1.026-.027V2.622h17.458v3.871z"/>
    `,
    viewBox: "0 0 40 40"
  }
};

Vue.use(Chakra, {
  icons: {
    extend: {
      ...customIcons
    }
  }
});

Vue.config.productionTip = false;

new Vue({
  render: (h) => h(CThemeProvider, [h(App)])
}).$mount("#app");

App.vue

<template>
  <c-box>
    <c-icon name="fortranIcon" />
  </c-box>
</template>

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

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

We have the customIcons object with the SVG path element set as the value of path .

Then we merge the customIcons object into extend .

And in App.vue , we set the name to the property name of the icon in customIcons .

Conclusion

We can add various kinds of icons 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.

Grid Layout

We can add a grid layout with the c-grid component.

For instance, we can write:

<template>
  <c-box>
    <c-grid w="600px" template-columns="repeat(5, 1fr)" gap="6">
      <c-box w="100%" h="10" bg="blue.300" />
      <c-box w="100%" h="10" bg="vue.300" />
      <c-box w="100%" h="10" bg="orange.300" />
      <c-box w="100%" h="10" bg="pink.300" />
      <c-box w="100%" h="10" bg="red.300" />
    </c-grid>
  </c-box>
</template>

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

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

to add a grid container with it.

template-columns lets us define the columns for the grid.

gap lets us set the gap between each grid item.

Then we have c-box inside it to add the grid items.

w is the width. h is the height. bg is the background color.

Heading

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

For example, we can write:

<template>
  <c-box>
    <c-heading>I'm a Heading</c-heading>
  </c-box>
</template>

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

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

We can set the tag that it’s rendered as with the as prop.

The size prop sets the size of the heading.

For example, we can write:

<template>
  <c-box>
    <c-heading as="h1" size="2xl">I'm a Heading</c-heading>
  </c-box>
</template>

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

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

to set the tag and size.

2xl is the biggest size.

Other sizes include xl , lg , md , sm , and xs .

xl is extra large. lg is large. md is medium. sm is small and xs is extra small.

We can also change the font size with the fontSize prop:

<template>
  <c-box>
    <c-heading as="h1" fontSize="50px">I'm a Heading</c-heading>
  </c-box>
</template>

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

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

Conclusion

We can add a grid layout and heading 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.

Flex Container

We can add a flex container with the c-flex component.

For instance, we can write:

<template>
  <c-box>
    <c-flex align="center">
      <c-flex bg="green.50" align="flex-end">
        <c-text>Box 1</c-text>
      </c-flex>
      <c-flex bg="blue.50" size="150px" align="center" justify="center">
        <c-text text-align="center" bg="orange.50"> Box 2 </c-text>
      </c-flex>
      <c-box>
        <c-text bg="tomato" color="white"> Box 3 </c-text>
      </c-box>
    </c-flex>
  </c-box>
</template>

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

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

We add the c-flex component to add a container that has the CSS display property set to flex .

The bg prop sets the background color.

align sets the justify-items CSS property.

text-align sets the text-align CSS property.

size sets the width and height.

Form Control

We can add a form control container with the c-form-control component.

For instance, we can write:

<template>
  <c-box>
    <c-form-control>
      <c-form-label for="email">Email address</c-form-label>
      <c-input type="email" id="email" />
      <c-form-helper-text> We'll never share your email. </c-form-helper-text>
    </c-form-control>
  </c-box>
</template>

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

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

We add the c-form-label component to add a label for the input.

c-input is a text input.

c-form-helper-text is a container for the helper text.

Radio Button

We can put radio buttons inside a c-form-control .

To do that, we write:

<template>
  <c-box>
    <c-form-control>
      <c-form-label as="legend">Favorite fruit</c-form-label>
      <c-radio-group default-value="orange">
        <c-radio value="apple">apple</c-radio>
        <c-radio value="orange">orange</c-radio>
        <c-radio value="grape">grape</c-radio>
      </c-radio-group>
      <c-form-helper-text> Select only if you're a fan. </c-form-helper-text>
    </c-form-control>
  </c-box>
</template>

<script>
import {
  CBox,
  CFormControl,
  CFormLabel,
  CFormHelperText,
  CRadio,
  CRadioGroup,
} from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CFormControl,
    CFormLabel,
    CFormHelperText,
    CRadio,
    CRadioGroup,
  },
};
</script>

We add the c-radio-group component to group the c-radio components.

as sets the tag to render the component as.

default-value sets the default value to pick from the group.

Each c-radio component has a value prop to set the value.

Conclusion

We can add flex containers and form controls 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.

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.