Extending Chakra (using as basis for a customised UI kit)

[christophermiles]

We have a number of apps that will need to share a common UI kit, which will be developed as a separate package.

Chakra looks amazing 🙏 and I love the focus on accessibility and the approach you've taken to theming — seems so much more flexible than other UI libraries.

Out internal UI kit would likely have a number of components that serve as wrappers around the Chakra components, so that, for instance, if we have certain props that we would always pass to a particular Chakra component, we don't need to pass those same props every time we use the raw Chakra component in our separate apps, but rather import a wrapper component that passes those props.

I think that is do-able, and is an approach I've used to wrap other components in the past.

What I'm wondering though is how best to make sure that our apps have what they need for the Chakra functionality to work, ie. so that each app is doing the equivalent of:

import Vue from 'vue'
import Chakra, { CThemeProvider, CReset } from '@chakra-ui/vue'
import App from './App.vue'

Vue.use(Chakra)

new Vue({
  el: '#app',
  render: (h) => h(CThemeProvider, [h(CReset), h(App)])
}).$mount()

I imagine that Vue.use(Chakra) is needed to set up things like Portal for the modals etc. So presumably our individual Vue apps would need some way to 'use' Chakra, even if we're importing our own customised 'wrapper' components rather than the 'raw' Chakra components.

We're likely going to be using using Nuxt 3, so I am imagining writing our UI kit as a Nuxt plugin that would provide and execute the following for whichever of our apps are using the plugin:

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

Vue.use(Chakra)

What I'm not sure about is how the UI kit Nuxt plugin that is using Chakra can ensure that the app that is using the plugin injects CThemeProvider and CReset into the app's render function.

I realise this is out of scope for Chakra, which is why I've asked here rather than raised an issue ticket.