Skip to content

chakra-ui/chakra-ui-vue

develop
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
December 2, 2019 23:45
January 23, 2023 01:44
September 19, 2019 16:15
October 13, 2019 00:37
December 3, 2019 17:24
November 5, 2019 21:30
August 13, 2021 19:52

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

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!