UI Development with Chakra UI Vue — Aspect Ratio Box

Photo by Ermelinda Martín on Unsplash

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.