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.
