Have ideas to improve npm?Join in the discussion! »

    @chakra-ui/vue
    TypeScript icon, indicating that this package has built-in type declarations

    0.9.0 • Public • Published

    Build & Test Components Netlify Status 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, CFlex 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

    or

    npm install @chakra-ui/vue emotion

    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 @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 bootstrap
    yarn dev

    Related

    Created by Jonathan Bakebwa

    Install

    npm i @chakra-ui/vue

    DownloadsWeekly Downloads

    722

    Version

    0.9.0

    License

    MIT

    Unpacked Size

    1.53 MB

    Total Files

    568

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar