Vuepress Support

[HoukasaurusRex]

Is your feature request related to a problem? Please describe.

In Vuepress, there seems to be no straightforward way to begin using Chakra UI components.

Describe the solution you'd like

Either a simple solution provided in the documentation, or a dedicated plugin for Vuepress.

Describe alternatives you've considered

I've tried some hacky configurations in Vuepress's enhanceApp.js like:

import Chakra, { CThemeProvider, CColorModeProvider } from '@chakra-ui/vue'

const ChakraMixins = {
  install(Vue, options) {
    const { $chakraTheme, $chakraIcons } = CThemeProvider.provide()
    const { $chakraColorMode, $toggleColorMode } = CColorModeProvider.provide()
    Vue.prototype.$chakraTheme = $chakraTheme
    Vue.prototype.$chakraColorMode = $chakraColorMode
    Vue.prototype.$toggleColorMode = $toggleColorMode
    Vue.prototype.$chakraIcons = $chakraIcons
  }
}

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.use(ChakraMixins)
}

Or using mixins instead, but either way I get errors like

• Injection "$chakraTheme" not found
• Injection "$chakraColorMode" not found
• Error in render: "TypeError: Cannot read property 'colors' of undefined

Additional context

While the Chakra UI recommends adding the CThemeProvider in a render function, there seems no simple (or smooth) way to modify the one used in Vuepress. If anyone has implementation ideas or suggestions, would appreciate!

[HoukasaurusRex]

Update: with the help of @codebender828, it seems defining the providers in the mixin work well.

theme/enhanceApp.js

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,
        $chakraIcons: {
          ...internalIcons,
          ...parsePackIcons({ faHandHoldingHeart })
        }
      }
    },
    methods: {
      toggleColorMode () {
        this.colorMode = this.colorMode === 'light' ? 'dark' : 'light'
      }
    }
  })
})

I'll test the functionality of other chakra components, but this seems to work for me so far. If it's a good solution for everyone I can create a vuepress plugin and update the chakra docs for a vuepress setup guide. Haven't tested color mode or breakpoint methods yet.

There's also the ability to extend theme layouts in vuepress with some configuration.

theme/layouts/Layout.vue

<template>
  <CThemeProvider>
    <CReset />
    <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>

theme/index.js

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

[codebender828]

Thanks for the work done here @HoukasaurusRex .

Closing this issue for now. The procedure has been added to docs in #395