Category: Chakra UI Vue

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.

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.

Elements in Inputs

We can add elements in inputs with the c-input-left-element or c-input-right-element components.

c-input-left-element adds an element on the left side of the input.

And c-input-right-element adds an element on the right side of the input.

For instance, we can write:

<template>
  <c-box>
    <c-input-group size="md">
      <c-input
        pr="4.5rem"
        :type="show ? 'text' : 'password'"
        placeholder="Enter password"
        v-model="password"
      />
      <c-input-right-element width="4.5rem">
        <c-button h="1.75rem" size="sm" @click="show = !show">
          {{ show ? "Hide" : "Show" }}
        </c-button>
      </c-input-right-element>
    </c-input-group>
  </c-box>
</template>

<script>
import {
  CBox,
  CInputGroup,
  CInput,
  CInputRightElement,
  CButton,
} from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CInputGroup,
    CInput,
    CInputRightElement,
    CButton,
  },
  data() {
    return {
      password: "",
      show: false,
    };
  },
};
</script>

to add a Show button on the right side of the input to let users see what password they entered.

Input Focus and Error

We can set the focus-border-color prop to set the border color when we focus on the input.

For instance, we can write:

<template>
  <c-box>
    <c-input
      focus-border-color="lime"
      placeholder="Here is a sample placeholder"
    />
  </c-box>
</template>

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

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

to set the border color to lime when we focus on it.

We can add the is-invalid prop to show the user that the input is invalid.

And we can set the error-border-color to set the border color of the input when the input is invalid.

For example, we can write:

<template>
  <c-box>
    <c-input
      is-invalid
      error-border-color="red.300"
      placeholder="Here is a sample placeholder"
    />
  </c-box>
</template>

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

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

to add the props.

Conclusion

We can add inputs with various styles with Chakra UI Vue.

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.

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.

Icon Buttons

We can add icon buttons with Chakra UI Vue.

To do this, we write:

<template>
  <c-box> <c-icon-button icon="check" aria-label="check" /> </c-box>
</template>

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

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

We add the icon prop to set the name of the icon to display.

aria-label has the text description of the icon.

The variant-color prop sets the background color:

<template>
  <c-box>
    <c-icon-button icon="check" aria-label="check" variant-color="blue" />
  </c-box>
</template>

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

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

size prop sets the size:

<template>
  <c-box>
    <c-icon-button icon="check" aria-label="check" size="lg" />
  </c-box>
</template>

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

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

Custom icons also works with c-icon-button .

For instance, we can write:

main.js

import Vue from "vue";
import Chakra, { CThemeProvider } from "@chakra-ui/vue";
import App from "./App.vue";

const customIcons = {
  fortranIcon: {
    path: `
      <path d="M19.536 0H4.464A4.463 4.463 0 0 0 0 4.464v15.073A4.463 4.463 0 0 0 4.464 24h15.073A4.463 4.463 0 0 0 24 19.536V4.464A4.463 4.463 0 0 0 19.536 0zm1.193 6.493v3.871l-.922-.005c-.507-.003-.981-.021-1.052-.041-.128-.036-.131-.05-.192-.839-.079-1.013-.143-1.462-.306-2.136-.352-1.457-1.096-2.25-2.309-2.463-.509-.089-2.731-.176-4.558-.177L10.13 4.7v5.82l.662-.033c.757-.038 1.353-.129 1.64-.252.306-.131.629-.462.781-.799.158-.352.262-.815.345-1.542.033-.286.07-.572.083-.636.024-.116.028-.117 1.036-.117h1.012v9.3h-2.062l-.035-.536c-.063-.971-.252-1.891-.479-2.331-.311-.601-.922-.871-2.151-.95a11.422 11.422 0 0 1-.666-.059l-.172-.027.02 2.926c.021 3.086.03 3.206.265 3.465.241.266.381.284 2.827.368.05.002.065.246.065 1.041v1.039H3.271v-1.039c0-.954.007-1.039.091-1.041.05-.001.543-.023 1.097-.049.891-.042 1.033-.061 1.244-.167a.712.712 0 0 0 .345-.328c.106-.206.107-.254.107-6.78 0-6.133-.006-6.584-.09-6.737a.938.938 0 0 0-.553-.436c-.104-.032-.65-.07-1.215-.086l-1.026-.027V2.622h17.458v3.871z"/>
    `,
    viewBox: "0 0 40 40"
  }
};

Vue.use(Chakra, {
  icons: {
    extend: {
      ...customIcons
    }
  }
});

Vue.config.productionTip = false;

new Vue({
  render: (h) => h(CThemeProvider, [h(App)])
}).$mount("#app");

App.vue

<template>
  <c-box>
    <c-icon-button icon="fortranIcon" aria-label="check" size="lg" />
  </c-box>
</template>

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

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

customIcons has the SVG icon’s path element.

We merge customIcons into extend to add the icon.

And we use the icon by setting the icon prop to the property name of the icon in customIcon .

Conclusion

We can add icon buttons easily with Chakra UI Vue.

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.

Icon

We can add an icon with the c-icon prop.

For instance, we can write:

<template>
  <c-box>
    <c-icon name="phone" :mr="2" />
    <c-icon name="check-circle" size="24px" :mr="2" />
    <c-icon name="warning" size="32px" color="red.500" :mr="2" />
  </c-box>
</template>

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

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

name sets the name of the icon to display.

size has the size.

color has the color.

We can also add 3rd party icons with c-icon .

To do this, we write:

main.js

import Vue from "vue";
import Chakra, { CThemeProvider } from "@chakra-ui/vue";
import { faGlobeAfrica } from "@fortawesome/free-solid-svg-icons";

import App from "./App.vue";
Vue.use(Chakra, {
  icons: {
    iconPack: "fa",
    iconSet: {
      faGlobeAfrica
    }
  }
});

Vue.config.productionTip = false;

new Vue({
  render: (h) => h(CThemeProvider, [h(App)])
}).$mount("#app");

App.vue

<template>
  <c-box>
    <c-icon name="globe-africa" />
  </c-box>
</template>

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

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

We install the @fortawesome/free-solid-svg-icons package and add some options into the 2nd argument of Vue.use .

iconPack sets the icon pack to use.

iconSet has the icon we want to use.

Then we set name to show the icon in App.vue .

To add a custom icon, we can add our icons to the Chakra UI options.

To do this, we write:

main.js

import Vue from "vue";
import Chakra, { CThemeProvider } from "@chakra-ui/vue";
import App from "./App.vue";

const customIcons = {
  fortranIcon: {
    path: `
      <path d="M19.536 0H4.464A4.463 4.463 0 0 0 0 4.464v15.073A4.463 4.463 0 0 0 4.464 24h15.073A4.463 4.463 0 0 0 24 19.536V4.464A4.463 4.463 0 0 0 19.536 0zm1.193 6.493v3.871l-.922-.005c-.507-.003-.981-.021-1.052-.041-.128-.036-.131-.05-.192-.839-.079-1.013-.143-1.462-.306-2.136-.352-1.457-1.096-2.25-2.309-2.463-.509-.089-2.731-.176-4.558-.177L10.13 4.7v5.82l.662-.033c.757-.038 1.353-.129 1.64-.252.306-.131.629-.462.781-.799.158-.352.262-.815.345-1.542.033-.286.07-.572.083-.636.024-.116.028-.117 1.036-.117h1.012v9.3h-2.062l-.035-.536c-.063-.971-.252-1.891-.479-2.331-.311-.601-.922-.871-2.151-.95a11.422 11.422 0 0 1-.666-.059l-.172-.027.02 2.926c.021 3.086.03 3.206.265 3.465.241.266.381.284 2.827.368.05.002.065.246.065 1.041v1.039H3.271v-1.039c0-.954.007-1.039.091-1.041.05-.001.543-.023 1.097-.049.891-.042 1.033-.061 1.244-.167a.712.712 0 0 0 .345-.328c.106-.206.107-.254.107-6.78 0-6.133-.006-6.584-.09-6.737a.938.938 0 0 0-.553-.436c-.104-.032-.65-.07-1.215-.086l-1.026-.027V2.622h17.458v3.871z"/>
    `,
    viewBox: "0 0 40 40"
  }
};

Vue.use(Chakra, {
  icons: {
    extend: {
      ...customIcons
    }
  }
});

Vue.config.productionTip = false;

new Vue({
  render: (h) => h(CThemeProvider, [h(App)])
}).$mount("#app");

App.vue

<template>
  <c-box>
    <c-icon name="fortranIcon" />
  </c-box>
</template>

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

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

We have the customIcons object with the SVG path element set as the value of path .

Then we merge the customIcons object into extend .

And in App.vue , we set the name to the property name of the icon in customIcons .

Conclusion

We can add various kinds of icons easily with Chakra UI Vue.