UI Development with Chakra UI Vue — Images and Inputs

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.

Images

We can add images with the c-image component.

For instance, we can write:

<template>
  <c-box>
    <c-image src="https://picsum.photos/id/237/200/300" alt="dog" />
  </c-box>
</template>

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

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

We set the src prop to the URL of the image.

alt has the text description of the image.

The size prop sets the size:

<template>
  <c-box>
    <c-image
      size="100px"
      src="https://picsum.photos/id/237/200/300"
      alt="dog"
    />
  </c-box>
</template>

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

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

We can set the URL of a fallback image that loads when the actual image can’t load with the fallback-src prop:

<template>
  <c-box>
    <c-image
      size="100px"
      src="abc"
      alt="dog"
      fallback-src="https://via.placeholder.com/150"
    />
  </c-box>
</template>

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

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

Input

We can add an input with the c-input component:

<template>
  <c-box>
    <c-input placeholder="Basic Input" />
  </c-box>
</template>

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

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

The size prop sets the size:

<template>
  <c-box>
    <c-input placeholder="Basic Input" size="lg" />
  </c-box>
</template>

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

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

lg is large.

The size value can also be set to md for medium and sm for small.

The variant prop sets the style variant of the input.

For instance, we can write:

<template>
  <c-box>
    <c-stack spacing="3">
      <c-input variant="outline" placeholder="Outline" />
      <c-input variant="filled" placeholder="Filled" />
      <c-input variant="flushed" placeholder="Flushed" />
      <c-input variant="unstyled" placeholder="Unstyled" />
    </c-stack>
  </c-box>
</template>

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

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

to set the variant prop to set the styles.

outline adds an outline.

filled adds a background color.

flushed removes the padding for the placeholder.

Also, we can add addons to the input.

For instance, we can write:

<template>
  <c-box>
    <c-input-group>
      <c-input-left-addon>+234</c-input-left-addon>
      <c-input type="tel" roundedLeft="0" placeholder="phone number" />
    </c-input-group>
  </c-box>
</template>

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

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

to use the c-input-left-addon component to add the addon to the left of the input.

The c-input-right-addon adds the input addon to the right:

<template>
  <c-box>
    <c-input-group>
      <c-input rounded="0" placeholder="mysite" />
      <c-input-right-addon>.com</c-input-right-addon>
    </c-input-group>
  </c-box>
</template>

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

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

Conclusion

We can add images and inputs with Chakra UI Vue.