Build scalable and accessible Vue.js applications with ease.

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

Made for Vue 2.X

Looking for the documentation?

Head over here => https://vue.chakra-ui.com

中文文档翻译Github问题

Features

• Ease of Styling: Chakra UI contains a set of layout components like CBox, CFlex and CStack that make it easy to style your components by passing props. Learn more
• Flexible & composable: Chakra UI components are built on top of a Vue UI Primitive for endless composability.
• Accessible. Chakra UI components follows the WAI-ARIA guidelines specifications and have the right aria-* attributes.
• Dark Mode 😍: Most components in Chakra UI are dark mode compatible.

Table of Contents

1. Installation
2. Usage a. With Nuxt

• Looking for the documentation?
• Features
  • Table of Contents
• Installation
• Usage
  • Codesandbox starters
  • Storybook Components
  • Development for Contributing:
    • Related

Installation

1yarn add @chakra-ui/vue emotion

or

1npm 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.

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

Usage

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

1import Vue from 'vue'
2import Chakra from '@chakra-ui/vue'
3import App from './App.vue'
4
5Vue.use(Chakra)
6
7new Vue({
8  el: '#app',
9  render: (h) => h(App)
10}).$mount()

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

In your App.vue file.

1<template>
2  <CThemeProvider>
3    <CReset />
4
5    <!--
6      Your application code goes here! 😁
7    -->
8  </CThemeProvider>
9</template>
10
11<script>
12  import { CThemeProvider, CReset } from '@chakra-ui/vue'
13
14  export default {
15    name: 'App',
16    components: {
17      CThemeProvider,
18      CReset
19    }
20  }
21</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:

1<template>
2  <CThemeProvider>
3    <CReset />
4
5    <!--
6      Your application code goes here! 😁
7    -->
8    <CButton variantColor="blue">
9      Chakra consumed ⚡️
10    </CButton>
11  </CThemeProvider>
12</template>
13
14<script>
15  import { CThemeProvider, CReset, CButton } from '@chakra-ui/vue'
16
17  export default {
18    name: 'App',
19    components: {
20      CThemeProvider,
21      CReset,
22      CButton
23    }
24  }
25</script>

Codesandbox starters

• Vue Starter
• Nuxt Starter
• Gridsome 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.

1yarn install
2yarn bootstrap
3yarn dev

Related

• Chakra UI for React
• Vuetify
• Buefy
• Vuesax

Created by Jonathan Bakebwa