UI Development with Chakra UI Vue — Aspect Ratio Box

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.

Aspect Ratio Box

We can use the CAspectRatioBox component to add a container that maintains its aspect ratio when we resize it.

For instance, we can write:

<template>
  <c-box>
    <c-aspect-ratio-box max-w="560px" :ratio="1">
      <c-box
        as="iframe"
        title="naruto"
        src="https://www.youtube.com/embed/QhBnZ6NPOY0"
        allow-full-screen
      />
    </c-aspect-ratio-box>
  </c-box>
</template>

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

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

We register the CAspectRatioBox component to add it.

Then we set the ratio prop to the aspect ratio we want.

max-w is the max-width of the container.

We add a c-box with the as prop set to iframe and src set to a YouTube video URL to embed a video.

To add an image, we can write:

<template>
  <c-box>
    <c-aspect-ratio-box max-w="560px" :ratio="1">
      <c-image src="https://picsum.photos/200" alt="image" object-fit="cover" />
    </c-aspect-ratio-box>
  </c-box>
</template>

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

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

We just put a c-image component inside the c-aspect-ratio-box to make the image maintain its aspect ratio.

Conclusion

We can add the c-aspect-ratio-box component to add a container than maintains the aspect ratio of the contents inside with Chakra UI Vue.