Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings
This repository was archived by the owner on Sep 20, 2024. It is now read-only.

chakra-ui/chakra-ui-vue

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Repository files navigation

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

This project follows the all-contributors specification. Contributions of any kind welcome!

Packages

No packages published

Languages

AltStyle によって変換されたページ (->オリジナル) /