-
-
Notifications
You must be signed in to change notification settings - Fork 91
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Unable to use Vuetify treeShake #166
Comments
While using I'm not very familiar with SApp.vue <template>
<v-app><slot /></v-app>
</template> MyButton.stories.js export const primaryButton = () => '<s-app><MyButton type="primary">Primary Button</MyButton></s-app>' |
The following Story definition imports the Vuetify components and prevents the need for the custom "wrap" component. You will need to have the [working code]
If you want to use decorators, local or global, the Vuetify components also need to be referenced in the components property. [working code]
demo repo |
To set up a npx nuxt storybook eject change import '~~/.nuxt-storybook/storybook/preview.js'
import {VApp} from 'vuetify/lib'
export const decorators = [() => {
return {
template: "<v-app><story/></v-app>",
components: {VApp}
}
}] This way you don't have to call the |
It works, but I want to add some details. First, you need to understand that we are configuring the module in manual mode. You need to create a directory /.storybook and two files main.js and preview.js main.js
and preview.js
Storybook configuration in the nuxt.config.js file is no longer required and can be deleted. |
I believe this is an issue with this module. When using the
treeShake
option in Vuetify config which is needed for customising the sass variables in Vuetify the<v-app>
component isn't registered and therefore doesn't initialise.Version
@nuxtjs/storybook: 3.1.0
nuxt: 2.14.9
@nuxtjs/vuetify: 1.11.2
Reproduction Link
https://codesandbox.io/s/elegant-forest-6juvw
https://6juvw.sse.codesandbox.io/?path=/story/button--primary-button
Steps to reproduce
Add
treeShake: true
tovuetify
config block innuxt.config.js
. Run storybook as normal, see 'Primary Button' example.What is Expected?
The button should be blue. If the
VApp
component were initialised correctly thev-application
class is applied to the v-app element and the theme works.What is actually happening?
See console for error -
v-app
is unregistered.The text was updated successfully, but these errors were encountered: