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.

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.

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.

Tooltip

We can add a tooltip with Chakra UI Vue.

For instance, we can write:

<template>
  <c-box> <c-tooltip label="tooltip">Hover Me</c-tooltip> </c-box>
</template>

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

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

We add the c-tooltip component to add the tooltip.

The label has the tooltip text.

When we hover over ‘Hover Me’, we see the tooltip displayed.

We can add an icon as the hover content.

For instance, we can write:

<template>
  <c-box>
    <c-tooltip label="Welcome home" placement="bottom">
      <c-icon name="phone" />
    </c-tooltip>
  </c-box>
</template>

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

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

to add an icon.

placement sets the placement of the tooltip.

We can change the background color of the tooltip with the bg prop:

<template>
  <c-box>
    <c-tooltip label="Welcome home" placement="bottom" bg="blue.600">
      <c-icon name="phone" />
    </c-tooltip>
  </c-box>
</template>

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

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

And we can add an arrow to the tooltip with the has-arrow prop:

<template>
  <c-box>
    <c-tooltip label="Welcome home" placement="bottom" has-arrow>
      <c-icon name="phone" />
    </c-tooltip>
  </c-box>
</template>

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

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

Conclusion

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

Toast

Chakra UI Vue comes with a toast component.

To add it, we can write:

<template>
  <c-box>
    <c-button @click="showToast">Show Toast</c-button>
  </c-box>
</template>

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

export default {
  components: {
    CBox,
    CButton,
  },
  methods: {
    showToast() {
      this.$toast({
        title: "Account created.",
        description: "We've created your account for you.",
        status: "info",
        duration: 10000,
      });
    },
  },
};
</script>

We have a c-button that calls the showToast method when we click it.

In the showToast method, we call the this.$toast method to open the toast.

title has the title.

description has the main content text.

status sets the type of toast to show.

status can also be 'success' , 'warning' or 'error' .

duration is the duration milliseconds that the toast would be shown.

We can also set a component to show as the toast content.

For instance, we can write:

<template>
  <c-box>
    <c-button @click="showToast">Show Toast</c-button>
  </c-box>
</template>

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

export default {
  components: {
    CBox,
    CButton,
  },
  methods: {
    showToast() {
      this.$toast({
        position: "bottom-left",
        render: () => {
          return this.$createElement(
            "c-box",
            {
              props: {
                color: "white",
                p: 3,
                m: 3,
                bg: "blue.500",
              },
            },
            "Hello World!"
          );
        },
      });
    },
  },
};
</script>

We have the render method that returns c-box component as the toast content.

The props property has the props we pass into c-box .

The 3rd argument has the child content of the c-box .

So when we click on the c-button , ‘Hello World!’ should be shown.

position sets the position of the toast.

The variant property changes the background color style.

For instance, if we have:

<template>
  <c-box>
    <c-button @click="showToast">Show Toast</c-button>
  </c-box>
</template>

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

export default {
  components: {
    CBox,
    CButton,
  },
  methods: {
    showToast() {
      this.$toast({
        title: "Account created.",
        description: "We've created your account for you.",
        status: "info",
        duration: 10000,
        variant: "subtle",
      });
    },
  },
};
</script>

Then the toast background color is lighter because variant is set to 'subtle' .

Conclusion

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

Text Area

We can add a text area with Chakra UI Vue.

To add it, we write:

<template>
  <c-box> <c-textarea placeholder="Here is a sample placeholder" /> </c-box>
</template>

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

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

We set the placeholder prop to set the placeholder text.

We can disable the text area with the is-disabled prop:

<template>
  <c-box>
    <c-textarea is-disabled placeholder="Here is a sample placeholder" />
  </c-box>
</template>

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

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

Also, we can add a red border around the text area with the is-invalid prop:

<template>
  <c-box>
    <c-textarea is-invalid placeholder="Here is a sample placeholder" />
  </c-box>
</template>

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

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

Conclusion

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

Text

We can add text into our Vue app with Chakra UI Vue’s c-text component.

For instance, we can write:

<template>
  <c-box>
    <c-text>Text</c-text>
  </c-box>
</template>

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

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

to add styled text with c-text .

The text style would match Chakra UI Vue styles.

We can change the font size with the fontSize prop:

<template>
  <c-box>
    <c-text fontSize="6xl">Text</c-text>
  </c-box>
</template>

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

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

Values of fontSize can be xs , sm , md , lg , xk , 2xl , 3xl , 4xl , 5xl , or 6xl ordered from smallest to largest.

We can truncate text when it’s wider than the viewport or the value of the maxWidth prop with the is-truncated prop:

<template>
  <c-box>
    <c-text is-truncated>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a
      lobortis sapien, nec viverra elit</c-text
    >
  </c-box>
</template>

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

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

Also we can use the as prop to render the text as the given element:

<template>
  <c-box>
    <c-text as="s">Strikethrough</c-text>
  </c-box>
</template>

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

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

We set as to s so we render the text as the s element, which renders as strikethrough text.

Conclusion

We can add styled text to our Vue app with Chakra UI Vue’s c-text component.