Getting Started with Chakra UI Vue

Let's see how you can get started with Chakra UI Vue 🥳.

You will start from a Vue 3 project. Don't worry, this can be a new or existing project. If you are looking to install Chakra UI Vue in Nuxt 3, you can take a look here.

The first thing you will need to do is install the Chakra UI Vue package and its dependencies in the Vue project. This can be achieved with the following terminal command:

pnpm install @chakra-ui/vue-next

Or if you prefer using yarn:

yarn add @chakra-ui/vue-next

Usage

Perfect, now before you can use the features of Chakra UI, you will have to add it to the app instance. For this, you have to import the createChakra function from the Chakra UI Vue package in the main.ts file. This allows you to create the Chakra UI Vue plugin instance and will make it easy to add plugin options like extendTheme for example. Then you need to tell the application that you want to use the plugin, this will make the Chakra UI Vue features available to use in your Vue app.

// main.tsimport { createChakra } from "@chakra-ui/vue-next"import { createApp } from 'vue'import App from './App.vue'const chakra = createChakra()const app = createApp(App).use(chakra)app.mount('#app')

This will also be the place where you can add extra options to the Chakra UI Vue plugin to extend Chakra's features for the application. But let's not dive into that yet, let's first see how you can use Chakra UI Components. An overview of all the components can be found here.

Using Chakra Components

Once you've installed and imported Chakra UI Vue, you can start using its components in your app. Let's pick the Button component, which is called CButton from the package. (Note the use of the script setup here)

// App.vue<script setup lang="ts">import { CButton } from "@chakra-ui/vue-next"
</script>

Next, you want to display the button on the page. After it is imported, the button will be available in the template.

// App.vue<template>  <CButton color-scheme="green">Button</CButton></template>

There you go! 🚀

You have a working button with some styling. Thanks to styled props, you can style Chakra UI Vue components. Like you did here with our button, making it use the green color scheme. Let's learn about styled props and the theming API of Chakra UI Vue here.