chakra-ui-vue: A JavaScript repository from quangtynu

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.

Hello, friend! 😄 chakra-ui-vue is currently under development. Majority of all the components ready and can be used!

A more detailed documentation site is in the pipeline and will be released soon! Check out our storybook and Codesandbox Vue & Nuxt Starters.

Features

Ease of Styling: Chakra UI contains a set of layout components like Box and Stack 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.

Installation
Usage a. With Nuxt

Features
- Table of Contents
Installation
Usage
Contributors ✨

Installation

yarn add @chakra-ui/vue emotion

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/core'

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/core'

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