UI Development with Chakra UI Vue — Links and Lists

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.

Link

We can add a link into our Vue app with the c-link component.

For instance, we can write:

<template>
  <c-box>
    <c-link href="https://vue.chakra-ui.com" is-external>
      Chakra Design system <c-icon name="external-link" mx="2px" />
    </c-link>
  </c-box>
</template>

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

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

is-external lets us make the link link outside the app.

href has the URL to go to.

We can set the color prop to change the link color:

<template>
  <c-box>
    <c-link href="https://vue.chakra-ui.com" is-external color="green.500">
      Chakra Design system
    </c-link>
  </c-box>
</template>

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

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

We can also render the link as a Vue Router router-link or Nuxt nuxt-link by setting the as prop to those values.

List

We can use the c-list component to render a list.

For instance, we can write:

<template>
  <c-box>
    <c-list styleType="disc">
      <c-list-item>Lorem ipsum dolor sit amet</c-list-item>
      <c-list-item>Consectetur adipiscing elit</c-list-item>
      <c-list-item>Integer molestie lorem at massa</c-list-item>
      <c-list-item>Facilisis in pretium nisl aliquet</c-list-item>
    </c-list>
  </c-box>
</template>

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

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

to add a list.

styleType sets the bullet type.

Also, we can add the c-list-icon component to change the list item icon:

<template>
  <c-box>
    <c-list spacing="3">
      <c-list-item>
        <c-list-icon icon="check-circle" color="green.500" />
        Lorem ipsum dolor sit amet, consectetur adipisicing elit
      </c-list-item>
      <c-list-item>
        <c-list-icon icon="check-circle" color="green.500" />
        Assumenda, quia temporibus eveniet a libero incidunt suscipit
      </c-list-item>
      <c-list-item>
        <c-list-icon icon="check-circle" color="green.500" />
        Quidem, ipsam illum quis sed voluptatum quae eum fugit earum
      </c-list-item>
      <c-list-item>
        <c-list-icon icon="settings" color="green.500" />
        Quidem, ipsam illum quis sed voluptatum quae eum fugit earum
      </c-list-item>
    </c-list>
  </c-box>
</template>

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

export default {
  components: {
    CBox,
    CList,
    CListItem,
    CListIcon,
  },
};
</script>

And we can change the tag the list is rendered as with the as prop:

<template>
  <c-box>
    <c-list as="ol" style-type="decimal">
      <c-list-item>Lorem ipsum dolor sit amet</c-list-item>
      <c-list-item>Consectetur adipiscing elit</c-list-item>
      <c-list-item>Integer molestie lorem at massa</c-list-item>
      <c-list-item>Facilisis in pretium nisl aliquet</c-list-item>
    </c-list>
  </c-box>
</template>

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

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

Conclusion

We can add links and lists easily with Chakra UI Vue.