Getting Started

Install Chakra UI Vue and it's peer dependency, emotion

yarn add @chakra-ui/vue emotion

or (with npm)

npm install @chakra-ui/vue emotion --save

With Vue CLI plugin#

If you are using Vue CLI 3, then you can install Chakra UI and get a base setup using the Chakra UI plugin.

vue add chakra-ui

Usage#

1. Import the Chakra UI plugin in your main.js file.

In order to use Chakra, you need to wrap your main application inside the Chakra CThemeProvider component. You can do so as shown below.

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

Vue.use(Chakra)

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

Injecting Global Styles.#

Sometimes you may need to apply css reset styles to your application. Chakra UI exports a CReset that'll remove browser default styles. It's heavily inspired by Tailwind's preflight

🚨 We highly recommend that you add the CReset at the root of your application to ensure all components work correctly.

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

Vue.use(Chakra)

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

Using Chakra components#

In your App.vue file.

<template>
  <c-box>
    <c-button>
      Chakra Consumed! ⚡️
    </c-button>
  </c-box>
</template>

<script lang="js">
import { CBox, CButton } from '@chakra-ui/vue'

export default {
  name: 'App',
  components: {
    CBox,
    CButton
  }
}
</script>

Codesandbox starters#

• Vue Starter
• Nuxt Starter
• Gridsome Starter

Storybook Components#

You can also view all developed components in Storybook!