Repository files navigation

@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

Head over here =>https://vue.chakra-ui.com

中文文档翻译Github问题

• Ease of Styling: Chakra UI contains a set of layout components likeCBox andCStack 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 guidelinesspecifications and have the rightaria-* attributes.
• Dark Mode 😍: Most components in Chakra UI are dark mode compatible.

1. Installation
2. Usagea.With Nuxt

• Looking for the documentation?
• Features
  • Table of Contents
• Installation
• Usage
  • Codesandbox starters
  • Storybook Components
  • Development for Contributing:
    • Related
• Contributors ✨

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

1. Import the Chakra UI plugin in yourmain.js file.

importVuefrom'vue'importChakrafrom'@chakra-ui/vue'importAppfrom'./App.vue'Vue.use(Chakra)newVue({el:'#app',render:(h)=>h(App)}).$mount()

2. Wrap your application inside the ChakraCThemeProvider. We also recommend that you include theCReset component to normalize all browser styling.

In yourApp.vue file.

<template><CThemeProvider><CReset/><!--      Your application code goes here! 😁    --></CThemeProvider></template><script>import{CThemeProvider,CReset}from'@chakra-ui/vue'exportdefault{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 theColorModeProvider component.

3. Hurray!🎉 Now the fun can begin. You can start using components like so:

<template><CThemeProvider><CReset/><!--      Your application code goes here! 😁    --><CButtonvariantColor="blue">      Chakra consumed ⚡️</CButton></CThemeProvider></template><script>import{CThemeProvider,CReset,CButton}from'@chakra-ui/vue'exportdefault{name:'App',components:{      CThemeProvider,      CReset,      CButton}}</script>

• Vue Starter
• Nuxt Starter
• Gridsome Starter

You can also view all developed components inStorybook!

Interested in contributing? See ouropen issues! Remember to take a look at ourCONTRIBUTORS guide.

yarn installyarn build&& yarn bootstrapyarn dev

• Chakra UI for React
• Vuetify
• Buefy
• Vuesax

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 theall-contributors specification. Contributions of any kind welcome!