Netlify Status

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](https://chakra-ui.com/style-props) - **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](#installation) 2. [Usage](#usage) a. [With Nuxt](#nuxt-usage) - [Looking for the documentation?](#looking-for-the-documentation) - [Features](#features) - [Table of Contents](#table-of-contents) - [Installation](#installation) - [Usage](#usage) - [Codesandbox starters](#codesandbox-starters) - [Storybook Components](#storybook-components) - [Development for Contributing:](#development-for-contributing) - [Related](#related) ## Installation ```bash yarn add @chakra-ui/vue emotion ``` or ```bash 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. ```bash yarn add @chakra-ui/vue emotion @nuxtjs/emotion ``` ## Usage **1. Import the Chakra UI plugin in your `main.js` file.** ```js 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._ ```html ``` 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: ```html ``` ### Codesandbox starters - [Vue Starter](https://codesandbox.io/s/chakra-ui-vue-starter-2sy0g) - [Nuxt Starter](https://codesandbox.io/s/chakra-ui-nuxt-demo-f8tq4) - [Gridsome Starter](https://codesandbox.io/s/chakra-ui-gridsome-demo-038c9) ### Storybook Components You can also view all developed components in **[Storybook](https://chakra-ui-vue.netlify.com)!** ### Development for Contributing: Interested in contributing? See our [open issues](https://github.com/chakra-ui/chakra-ui-vue/issues)! Remember to take a look at our [CONTRIBUTORS](./.github/CONTRIBUTING.md) guide. ```bash yarn install yarn bootstrap yarn dev ``` #### Related - [Chakra UI for React](https://github.com/chakra-ui/chakra-ui) - [Vuetify](https://vuetifyjs.org) - [Buefy](https://buefy.org) - [Vuesax](https://lusaxweb.github.io/vuesax) Created by [Jonathan Bakebwa](https://twitter.com/codebender828)

	Stars	Issues	Version	Updated	Created
@chakra-ui/vue	1,855	57	0.13.1	a year ago	4 years ago
buefy	9,521	17	0.9.29	2 months ago	7 years ago
quasar			2.16.4	3 days ago	11 years ago
quasar-cli	204	32	0.17.26	5 years ago	9 years ago
vuetify	39,102	767	3.6.6	2 days ago	8 years ago

@chakra-ui/vue vs buefy vs quasar vs quasar-cli vs vuetify

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past