⚡️ Build scalable and accessible Vue.js applications with ease.
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.comFeatures
- Ease of Styling: Chakra UI contains a set of layout components like
CBoxand
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
aria-* attributes.
- Dark Mode 😍: Most components in Chakra UI are dark mode compatible.
Table of Contents
a. With Nuxt - Table of Contents - Codesandbox starters - Storybook Components - Development for Contributing: - RelatedInstallation
yarn add @chakra-ui/vue @emotion/cssor
npm install @chakra-ui/vue @emotion/cssNote:
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/css @nuxtjs/emotionUsage
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 CThemeProvider. We also recommend that you include the CReset component to normalize all browser styling.
In your App.vue file.
<template>
<CThemeProvider>
<CReset />
<!-- Your application code goes here! 😁 --> </CThemeProvider> </template>
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>
<CThemeProvider>
<CReset />
<!-- Your application code goes here! 😁 --> <CButton variantColor="blue"> Chakra consumed ⚡️ </CButton> </CThemeProvider> </template>
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 build && yarn bootstrap
yarn devRelated
Contributors ✨
Thanks goes to these wonderful people (emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!
