With chakra ui

[Maskim]

Hello,

I'm using nuxt with chakra-ui and I installed nuxt-storybook but when I write my first story an error appear : this.$chakraTheme is not a function

I put in my nuxt config :

storybook: {
	decorators: ['<CThemeProvider><CColorModeProvider><story /></CThemeProvider></CColorModeProvider>'],
},

but it does not solve the problem...

Here's my button :

<template>
	<c-button
		size="lg"
		width="100%"
		letter-spacing="0.1em"
		font-weight="300"
		overflow="hidden"
		class="btn btn--primary"
		:class="{ 'btn--right-to-left': rightToLeft }"
		:_hover="{ color: 'white' }"
		v-bind="$attrs"
	>
		<c-text as="span" class="btn__hover" bg="primary.600"></c-text>

		<c-text as="span" class="btn__line btn__line--left"></c-text>
		<c-text as="span" class="btn__text"><slot /></c-text>
		<c-text as="span" class="btn__line btn__line--right"></c-text>
	</c-button>
</template>

<script lang="ts">
import Vue from 'vue'
import { Component, Prop } from 'vue-property-decorator'

@Component({
	name: 'button-primary',
})
export default class ButtonPrimary extends Vue {
	@Prop({ type: Boolean, default: false }) readonly rightToLeft!: boolean
}
</script>

And my story :

export default {
	title: 'ButtonPrimary',
}

export const NuxtWebsite = () => '<ButtonPrimary />

Can you help me to solve this ?

[farnabaz]

Hey, I'm not very familiar with chakra-ui and its initial setup. Could you create a simple reproduction project on codesandbox?

[philwolstenholme]

Hi @farnabaz, the setup is similar to the Vuetify example given in the docs (https://storybook.nuxtjs.org/options/#decorators)

storybook: {
    decorators: [
      // VApp decorator for Vuetify
      '<v-app><story/></v-app>'
    ]
  }

Except we use:

storybook: {
    decorators: [
      '<c-theme-provider><c-reset /><story/></c-theme-provider>'
    ],
  },

Is it possible that the c-theme-provider and c-reset components aren't being loaded as @nuxtjs/storybook expects the decorator to just be a string?

[philwolstenholme]

I was able to fix the issue by ejecting from @nuxtjs/storybook and then adding this to my preview.js:

export * from '~~/.nuxt-storybook/storybook/preview.js'

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

export const decorators = [
  () => ({
    components: { CThemeProvider, CReset },
    template: `
        <CThemeProvider><CReset /><story/></CThemeProvider>
      `
  })
]

[tobiasdiez]

v4 of this module is no longer actively supported. Please try the newest version and open an new issue if the problem persists. Thank you for your understanding.