UI Development with Chakra UI Vue — Stack

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.

Stack

We can add a stack of items onto the screen with the c-stack component.

For instance, we can write:

<template>
  <c-box>
    <c-stack :spacing="5">
      <c-box :p="5" shadow="md" border-width="1px">
        <c-heading>See the Vue</c-heading>
        <c-text :mt="4">Vue.</c-text>
      </c-box>
      <c-box :p="5" shadow="md" border-width="1px">
        <c-heading>Go Nuxt</c-heading>
        <c-text :mt="4">Nuxt.</c-text>
      </c-box>
    </c-stack>
  </c-box>
</template>

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

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

We wrap the c-stack from the c-box elements we want to stack together.

Then in the c-box elements, we add the c-heading and c-text components to add components for containers and text respectively.

Also, we can add the is-line prop to add containers side by side:

<template>
  <c-box>
    <c-stack :spacing="5" is-inline>
      <c-box :p="5" shadow="md" border-width="1px">
        <c-heading>See the Vue</c-heading>
        <c-text :mt="4">Vue.</c-text>
      </c-box>
      <c-box :p="5" shadow="md" border-width="1px">
        <c-heading>Go Nuxt</c-heading>
        <c-text :mt="4">Nuxt.</c-text>
      </c-box>
    </c-stack>
  </c-box>
</template>

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

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

And we can use the is-reverse prop to reverse the order of the items:

<template>
  <c-box>
    <c-stack :spacing="5" is-reversed>
      <c-box :p="5" shadow="md" border-width="1px">
        <c-heading>See the Vue</c-heading>
        <c-text :mt="4">Vue.</c-text>
      </c-box>
      <c-box :p="5" shadow="md" border-width="1px">
        <c-heading>Go Nuxt</c-heading>
        <c-text :mt="4">Nuxt.</c-text>
      </c-box>
    </c-stack>
  </c-box>
</template>

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

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

The 2nd c-box is now rendered first, then the 1st one is rendered below it.

We can also use it to stack HTML elements:

<template>
  <c-box>
    <c-stack>
      <c-text>Chakra component 1</c-text>
      <p>HTML paragraph element</p>
      <h3>HTML heading element</h3>
      <c-text>Chakra component 2</c-text>
    </c-stack>
  </c-box>
</template>

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

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

Conclusion

We can use Chakra UI Vue’s c-stack component to add stacked elements.