Usage with Vuepress

If you use Vuepress, you can extend your theme to install Chakra globally using Vuepress's theme inheritance.

Installation#

Install Chakra UI Vue and its peer dependency, @emotion/css

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

Usage#

Extend Your Theme#

First create a theme folder in your .vuepress directory and extend you Vuepress theme in your theme/index.js file.

module.exports = {
  extend: '@vuepress/theme-default' // whichever vuepress theme you use
}

Add Chakra's Global Mixins#

Add the Chakra UI providers in your theme/enhanceApp.js file as shown.

import Chakra, { internalIcons, defaultTheme, parsePackIcons } from '@chakra-ui/vue'
import { faHandHoldingHeart } from '@fortawesome/free-solid-svg-icons'

export default ({
  Vue, // the version of Vue being used in the VuePress app
  options, // the options for the root Vue instance
  router, // the router instance for the app
  siteData, // site metadata
  isServer // is this enhancement applied in server-rendering or client
}) => {
  Vue.use(Chakra)
  Vue.mixin({
    provide () {
      return {
        $chakraTheme: () => defaultTheme,
        $chakraColorMode: () => this.colorMode,
        $toggleColorMode: this.toggleColorMode,
        // icons must be parsed and spread into the icons provider to be available globally
        $chakraIcons: {
          ...internalIcons,
          ...parsePackIcons({ faHandHoldingHeart })
        }
      }
    },
    methods: {
      toggleColorMode () {
        this.colorMode = this.colorMode === 'light' ? 'dark' : 'light'
      }
    }
  })
}

Now you can wrap your main application inside the Chakra CThemeProvider component by creating a layout wrapper in theme/layouts/Layout.vue.

<template>
  <CThemeProvider>
    <CReset />  <!-- NOTE: Resetting styles may have adverse effects on some themes -->
    <Layout />
  </CThemeProvider>
</template>

<script>
import { CThemeProvider, CReset } from '@chakra-ui/vue'
import Layout from '@parent-theme/layouts/Layout.vue'

export default {
  name: 'ChakraLayout',
  components: {
    CThemeProvider,
    CReset,
    Layout
  }
}
</script>

Using Chakra components#

You can now use Chakra in your custom components for your theme in either your theme/components folder (available to other theme components), or your theme/global-components folder (available to your markdown pages as well as other components). Learn more about theme inheritance in the Vuepress documentation

In your my-component.vue file.

<template>
  <c-box>
    <c-button>
      Chakra Consumed! ⚡️
    </c-button>
  </c-box>
</template>

<script lang="js">
import { CBox, CButton } from '@chakra-ui/vue'

export default {
  name: 'MyComponent',
  components: {
    CBox,
    CButton
  }
}
</script>

Vuepress Codesandbox Starters#

Here's a link to sample component starter with Nuxt.js

Storybook Components#

You can also view all developed components in Storybook!

❤️ Contribute to this page

Caught a mistake or want to contribute to the documentation? Edit this page on GitHub!