How to use Vuetify (or other component libraries) with VitePress?

[bavalpey]

I've been trying to use Vuetify components with VitePress so as to avoid having to write all of my components by hand.

I looked here, and noticed that someone said they had got it working: vuetifyjs/vuetify#13859

This worked locally (though I had a the same issues with styling), but I could not get this to work after deployment. I was getting the error when deploying via github pages:

TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".css" for /home/runner/work/myrepo/repo/node_modules/vuetify/lib/components/VCode/VCode.css
    at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:160:9)
    at defaultGetFormat (node:internal/modules/esm/get_format:203:36)
    at defaultLoad (node:internal/modules/esm/load:143:22)
    at async ModuleLoader.load (node:internal/modules/esm/loader:409:7)
    at async ModuleLoader.moduleProvider (node:internal/modules/esm/loader:291:45)
Error: Process completed with exit code 1.

I tried a few things. First, I added vite-plugin-vuetify to the config in .vitepress/config.mts

import vuetify from 'vite-plugin-vuetify'

export default defineConfig({
  // snip
  vite: {
    plugins: [vuetify()]
  },

But this did not fix the issue, either.

I really just want a way to make nice tables and other components, and be able to use slots with :items so I don't have to convert my data (that exists in csv forms) to markdown tables.

[brc-dd]

Probably need to do something like:

vite: {
  // ...
  ssr: {
    noExternal: ['vuetify']
  }
}

[bavalpey]

Ah, thanks. I saw this, and tried it at some point and it didn't work, but I must have had other things in there.

Do you have any advice for integrating this nicely? I would like to remove the auto markdown styling just for these components. Right now, it renders oddly:

And for dark mode, it's worse:

I believe I should be able to override the styling for the vuetify components to make them use the color constants from vitepress's styles. But how to remove e.g., the bullet points from the <li> elements for the icons?

[brc-dd]

Add the postcss config from here - https://vitepress.dev/guide/markdown#raw then you can add vp-raw class to your table or any of its parent to remove default styles.

[CrazyOrr]

Add the postcss config from here - https://vitepress.dev/guide/markdown#raw then you can add vp-raw class to your table or any of its parent to remove default styles.

It works, but you need to know what css files to include. I think the document should explain this more clearly.