Nuxt 3 + vuetify: vuetify doesn't render

[erondpowell]

I was recently using this starter for Nuxt 3 + Vuetify: https://github.com/CodyBontecou/nuxt3-and-vuetify

When I fire up histoire, the content renders, but not the vuetify components/css.

I'm fairly new to all three systems (nuxt3, vuetify, and histoire). My goal is to be able to use Histoire as a learning tool, so I can better focus on components themselves, instead of an entire app.

If anybody has any tips, I'd be eternally grateful 🙏

[danielduckworth]

Hey @erondpowell, Vuetify out of the box uses @mid/font (web fonts) to render mdi icons. Depending on how you set up Histoire, you it might be configured to use @mdi/svg or @UnoCSS/preset-icons.

This example imports the css needed for @mdi/font:

https://github.com/histoire-dev/histoire/blob/main/examples/vue3-vuetify/src/histoire.setup.ts

However personally I recommend using [@UnoCSS/preset-icons] and changing the syntax or icon name reference with Vuetify components.