UI Development with Chakra UI Vue — v-chakra Directive

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.

v-chakra Directive

We can use the v-chakra directive to let us style non-Chakra UI Vue elements with Chakra UI Vue props.

For instance, we can write:

<template>
  <c-box>
    <div
      v-chakra
      p="3"
      bg="red.100"
      rounded="md"
      color="red.500"
      font-weight="bold"
    >
      Welcome
    </div>
  </c-box>
</template>

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

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

The p prop sets the padding. bg sets the background color.

rounded sets the breakpoint for rounded corners to apply.

color has the text color.

font-weight has the font-weight.

We can also style child elements with v-chakra .

To do this, we write:

<template>
  <c-box>
    <div
      v-chakra="{
        p: 3,
        shadow: 'sm',
        header: {
          bg: 'blue.100',
          fontSize: 'lg',
          fontWeight: 'bold',
        },
        '& > p': {
          fontStyle: 'italic',
        },
      }"
    >
      <header>Title</header>
      <p>Text</p>
    </div>
  </c-box>
</template>

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

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

The header property has the header element styles.

& > p has the p element styles.

We can also add computed styles by passing in a callback that returns an object with the style values:

<template>
  <c-box>
    <div
      v-chakra="
        (theme) => ({
          shadow: 'sm',
          bg: theme.colors.blue[800],
          color: theme.colors.yellow[300],
          p: {
            fontWeight: 'bold',
            p: 3,
          },
        })
      "
    >
      <header>Title</header>
      <p>Text</p>
    </div>
  </c-box>
</template>

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

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

We use the theme parameter to get the color values we want to set.

We used them to set the bg and color properties.

Conclusion

We can use the v-chakra directive to apply Chakra UI Vue styles directly to a non-Chakra UI Vue element.