/chakra-ui-vue

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

Primary LanguageJavaScriptMIT LicenseMIT

Build & Test Components Netlify Status Chakra UI Vue downloads All contributors

chakra-ui symbol

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
  • 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

Installation

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

or

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.

yarn add @chakra-ui/vue @emotion/css @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 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>

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

  export default {
    name: 'App',
    components: {
      CThemeProvider,
      CReset
    }
  }
</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>
  <CThemeProvider>
    <CReset />

    <!--
      Your application code goes here! 😁
    -->
    <CButton variantColor="blue">
      Chakra consumed ⚡️
    </CButton>
  </CThemeProvider>
</template>

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

  export default {
    name: 'App',
    components: {
      CThemeProvider,
      CReset,
      CButton
    }
  }
</script>

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 dev

Related

Contributors ✨

Thanks goes to these wonderful people (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 specification. Contributions of any kind welcome!