fossil ingot
I'd like to set up my decorators so that all stories for all components are wrapped in a Vuetify <v-app> component. I can't just do template: '<v-app><story/></v-app>', because it literally just renders <v-app> and not the actual VApp Vuetify component.
how do I go about doing this? thanks!
this might be a question for @hollow phoenix 🙂
hollow phoenix
Yes @fossil ingot it should work with CSF3 , using StroyObj ,
fossil ingot
ahaaaa, thank you! cool trick 😄
import { VApp } from 'vuetify/components';
export const decorators: Decorator[] = [
(story) => ({
components: { VApp, story },
template: '<v-app><story/></v-app>',
}),
];
shell apex
@fossil ingot If you want to use different themes, this recipe can help 🙂
fossil ingot
<@286566480043048961> If you want to use different themes, this recipe can help ...
ahh nice! I'll check this out later, thanks for sharing that!
maybe it'll also fix the issue where Storybook initially reloads several times upon start, and reloads when you switch to different stories? (Vuetify components being re-optimized in Vite)
shell apex
I haven't noticed multiple reloads in my example 🙂
fossil ingot
I haven't noticed multiple reloads in my example 🙂
hmmm. would you happen to have any spare time to help me out with this? I can pay you for your time
although, lemme take a stab at this after I read your article
it might be something dead simple
shell apex
Not today unfortunately but perhaps tomorrow if you're still having problems
fossil ingot
oh yeah, not today. it's not urgent.. BUT important for us to get this working smoothly. I'm gonna dig into your article right now 💪
one initial thought: it'd be nice to see the code behind this:
import { registerPlugins } from '../src/plugins';
there are so many ways to configure & set up Vuetify. it'd be good to see how you set yours up
fossil ingot
ok, so components will be auto imported then. no forced loading via createVuetify components property
I'm only explicitly loading the Vuetify labs components. all else is auto imported upon use.
export default createVuetify({
blueprint: _merge(md3, md3Custom),
components: labs,
icons: {
defaultSet: 'mdi',
aliases: {
...aliases,
...iconOverrides,
},
sets: { fa, mdi },
},
theme: {
defaultTheme: 'light',
themes: {
dark,
light,
},
variations: {
colors: ['primary', 'info'],
lighten: 9,
darken: 9,
},
},
});
Right, I didn't get too into the weeds with tweaking vuetify itself
fossil ingot
ok, actually this is working a bit better now! it seems to load Vuetify components less often. but.. towards the end of this video, you can see that it gets stuck on one and I have to reload to get it to work.
and every time I fire up Storybook, there's always that initial error
it's not a total showstopper, but just an annoyance. could also just be that this is due to 7.0 still being beta 🙂
lemme update all the related packages
I see beta 60 is out
whew.. btw is there a better way than this? 😆
pnpm i -D @storybook/addon-actions@next @storybook
/addon-essentials@next @storybook/addon-interactions@next @storybook/addon-links
@next @storybook/blocks@next @storybook/vue3@next @storybook/vue3-vite@next
unfortunately, pnpm up -i --latest doesn't pick up the next beta versions
shoot. still get the red error of death upon startup.
shell apex
run npx sb@next upgrade --prerelease
fossil ingot
and when I navigate between stories, it takes a while to load each one.
2:05:46 PM [vite] ✨ new dependencies optimized: vuetify, vuetify/labs/components, vuetify/blueprints, vuetify/iconsets/fa, vuetify/iconsets/mdi, ...and 2 more
2:05:46 PM [vite] ✨ optimized dependencies changed. reloading
2:05:56 PM [vite] ✨ new dependencies optimized: vuetify/lib/components/VCard/index.mjs, vuetify/lib/components/VOverlay/index.mjs, vuetify/lib/components/VProgressLinear/index.mjs
2:05:56 PM [vite] ✨ optimized dependencies changed. reloading
2:06:17 PM [vite] ✨ new dependencies optimized: vuetify/lib/components/VIcon/index.mjs, vuetify/lib/components/VSwitch/index.mjs, vuetify/lib/components/VList/index.mjs, vuetify/lib/components/VMenu/index.mjs, vuetify/lib/components/VTabs/index.mjs, ...and 4 more
2:06:17 PM [vite] ✨ optimized dependencies changed. reloading
2:06:41 PM [vite] ✨ new dependencies optimized: vuetify/lib/components/VBtn/index.mjs, vuetify/lib/components/VDivider/index.mjs, vuetify/lib/components/VDialog/index.mjs, vuetify/lib/components/VGrid/index.mjs
2:06:41 PM [vite] ✨ optimized dependencies changed. reloading
desert fjordBOT
ffxsam#6117 has been warned
shell apex
Interesting! I won't if this is a vite thing??? @half isle has this come up before?
fossil ingot
still seeing reloads all over the place as I navigate through my stories
so.. the Vuetify lead guy said to try importing all components instead of relying on auto import.
import 'vuetify/styles'
import { createVuetify } from 'vueify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
export default createVuetify({
components,
directives,
})
I tried that, it didn't help