Build scalable and accessible Vue.js applications with ease

chakra-ui-vue

chakra-ui-vue gives you a set of accessible and composable Vue components that you can use to build your favourite applications and sites.

Installation

yarn add @chakra-ui/vue emotion

or

npm install @chakra-ui/vue emotion

Note:
If you're using Nuxt, you need to install @nuxtjs/emotion package as well to server-side render your styles.

yarn add @chakra-ui/vue emotion @nuxtjs/emotion

Usage

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

import Vue from 'vue'
import Chakra from '@chakra-ui/vue'
import App from './App.vue'

Vue.use(Chakra)

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

2. Wrap your application inside the Chakra ThemeProvider. We also recommend that you include the CSSReset component to normalize all browser styling.

In your App.vue file.

<template>
  <ThemeProvider>
    <CSSReset />

    <!--
      Your application code goes here! ?
    -->
  </ThemeProvider>
</template>

<script>
  import { ThemeProvider, CSSReset } from '@chakra-ui/vue'

  export default {
    name: 'App',
    components: {
      ThemeProvider,
      CSSReset
    }
  }
</script>

If you'd like to toggle your app between dark and light mode, you can also wrap your application inside the ColorModeProvider component.

3. Hurray!? Now the fun can begin. You can start using components like so:

<template>
  <ThemeProvider>
    <CSSReset />

    <!--
      Your application code goes here! ?
    -->
    <button variantColor="blue">
      Chakra consumed ⚡️
    </button>
  </ThemeProvider>
</template>

<script>
  import { ThemeProvider, CSSReset, Button } from '@chakra-ui/vue'

  export default {
    name: 'App',
    components: {
      ThemeProvider,
      CSSReset,
      Button
    }
  }
</script>

Codesandbox starters

• Vue Starter
• Nuxt Starter

Storybook Components

You can also view all developed components in Storybook!

Development for Contributing:

Interested in contributing? See our open issues! Remember to take a look at our CONTRIBUTORS guide.

yarn install
yarn bootstrap
yarn dev

Project TODOs:

• [ ] Documentation site (Ongoing)
• [ ] Set up type system for plugin & components export with Typescript

GitHub