Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/chakra-ui/chakra-ui-vue

⚡️ Build scalable and accessible Vue.js applications with ease.
https://github.com/chakra-ui/chakra-ui-vue

a11y accessibility chakra-ui composition design-system hacktoberfest library nuxt ui vue vuejs vuejs-components wai-aria

Last synced: 3 months ago
JSON representation

⚡️ Build scalable and accessible Vue.js applications with ease.

Host: GitHub
URL: https://github.com/chakra-ui/chakra-ui-vue
Owner: chakra-ui
License: mit
Created: 2019-08-11T17:53:59.000Z (over 5 years ago)
Default Branch: develop
Last Pushed: 2023-07-19T08:14:25.000Z (over 1 year ago)
Last Synced: 2024-04-15T07:22:14.230Z (8 months ago)
Topics: a11y, accessibility, chakra-ui, composition, design-system, hacktoberfest, library, nuxt, ui, vue, vuejs, vuejs-components, wai-aria
Language: JavaScript
Homepage: https://vue.chakra-ui.com
Size: 9.53 MB
Stars: 1,855
Watchers: 23
Forks: 138
Open Issues: 57
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md

Awesome Lists containing this project

awesome-starred-test - chakra-ui/chakra-ui-vue - ⚡️ Build scalable and accessible Vue.js applications with ease. (JavaScript)
awesome-a11y-vue - @chakra-ui/vue - Build scalable and accessible Vue.js applications with ease. (Accessible libraries / Vuepress)
awesome-access - @chakra-ui/vue - Build scalable and accessible Vue.js applications with ease. (Accessible libraries / Vuepress)

README

        


  

  

  

  





  

    

  



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` 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)

- [Contributors ✨](#contributors-)

## Installation

```bash

yarn add @chakra-ui/vue @emotion/css

```

or

```bash

npm install @chakra-ui/vue @emotion/css

```



> **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/css @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

  

    

    

  

  import { CThemeProvider, CReset } from '@chakra-ui/vue'

  export default {

    name: 'App',

    components: {

      CThemeProvider,

      CReset

    }

  }

```

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

  

    

    

    

      Chakra consumed ⚡️

    

  

  import { CThemeProvider, CReset, CButton } from '@chakra-ui/vue'

  export default {

    name: 'App',

    components: {

      CThemeProvider,

      CReset,

      CButton

    }

  }

```

### 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 build && 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/)



## Contributors ✨

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

  

    
_{Jonathan Bakebwa}
💻 ⚠️ 📖

    
_Mesut
💻 ⚠️

    
_{Omereshone Kelvin Oghenerhoro}
📖 💻

    
_{Eric Carboni}
📖

    
_ankorGH
📖

    
_{Emmanuel Raymond}
💻 📖

    
_{Harry Gulliford}
📖

  

  

    
_{IFEANYICHUKWU AMAJUOYI}
📖

    
_{Pierre Grimaud}
📖

    
_{Ekunola Ezekiel}
🔧 📖

    
_{Gift Egwuenu}
📖

    
_{Joshua Angelo Bienes}
📖

    
_{Saptak Sengupta}
📖

    
_{Kuro Hsu}
📖 💻

  

  

    
_Anmol
📖

    
_{Vishnumohan R K}
📖

    
_{Ken Love}
💻 ⚠️

    
_{Guilherme Schalch}
💻

    
_{Žiga Vukčevič}
📖

    
_{Sybren W}
📖 🖋 💡 💻

    
_odanado
💻 🔧

  

  

    
_{Jonathan Hutchison}
💻 🐛 🤔 ⚠️ 📖

    
_{JT Houk}
📖 📦

    
_{Vincent Palma}
📖

    
_{MaySoMusician}
💻

    
_Martin
💻 ⚠️

    
_{Ejiro Asiuwhu}
📖

    
_{Abel N. Nieva}
💻

  

  

    
_{Lê Thông}
💻

    
_{Reinier van der Leer}
💻

  

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!