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

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