Getting Started with UI Development 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.

In this article, we’ll look at how to get started with UI development with Chakra UI Vue.

Getting Started

We can install the Chakra UI Vue packages by running:

npm install @chakra-ui/vue @emotion/css

Then we can use it by writing:

main.js

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

Vue.config.productionTip = false;

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

App.vue

<template>
  <c-box>
    <c-button>
      click me
    </c-button>
  </c-box>
</template>

<script>
import { CBox, CButton } from '@chakra-ui/vue'

export default {
  name: 'App',
  components: {
    CBox,
    CButton
  }
}
</script>

In main.js , we register the Chakra plugin with Vue.use .

Then we apply the theme with CThemeProvider used with the render method.

In App.vue , we add the components that we registered, which includes CBox for a container and CButton for a button.

Now we should see a styled button displayed.

Responsive Styles

Chakra UI Vue supports responsive styles out of the box.

To add them, we can set a few props.

For instance, we can write:

<template>
  <div>
    <c-box
      height="40px"
      bg="green.400"
      :width="['100%', '50%', '25%', '15%']"
    />
    <c-box :fontSize="['sm', 'md', 'lg', 'xl']">Font Size</c-box>
    <c-box :mt="[2, 4, 6, 8]" width="full" height="24px" bg="tomato" />
    <c-box bg="papayawhip" :p="[2, 4, 6, 8]"> Padding </c-box>
  </div>
</template>

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

export default {
  name: "App",
  components: {
    CBox,
  },
};
</script>

We have the first c-box component with the width prop set to different sizes for different screen widths.

100% is the base width. 50% is set for 480px upwards. 25% is set for 768px upwards. And 15% is set for 992px upwards.

Likewise, in the 2nd c=box, we have the same sizes for different screen widths set for the fontSize . They’re in the same order as width.

In the 3rd c-box , we set the mt prop the same way. mt sets the top margin.

In the 4th c-box, we set the p prop to set the padding.

Now we don’t have to set any media queries to add responsive styles.

Conclusion

We can create good-looking responsive web apps easily with Chakra UI Vue.