Getting Started with Chakra UI Vue

Using Chakra UI Vue in your Vue.js project is very simple. Install the package and its dependencies.

pnpm add @chakra-ui/vue-next

Usage

Before you can use Chakra, you have to add it to the Vue.js instance. This will be done in your main.ts file.

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

Using Chakra Components

When you can use a Chakra UI Vue component, you will first have to import the Chakra component you want to use, for example, the CButton.

import { CButton } from "@chakra-ui/vue-next"

Next, you have to add it to the components option.

export default defineComponent({  name: 'YOUR COMPONENT NAME',  components: {    CButton  }})

You are now able to use it in the template.

<CButton variant-color="green">Button</CButton>