Which component library to use best?

[crixx]

Hi there, I just wanted to ask if anyone has a recommendation for which component library (naive-ui, vuestic, vuetify etc.) to use together with Vuepress 2 and vite?

[crixx]

FYI: I've implemented https://www.naiveui.com/ by importing it via the "not recommended global install" (https://www.naiveui.com/en-US/os-theme/docs/usage-sfc) in my client.ts.

When doing the recommended "import directly" in my SFC, I got errors when running it in production mode...

• Build error when using vite-ssg/使用vite-ssg进行构建时出错 tusen-ai/naive-ui#4225

[Mister-Hope]

CommonJS may need to set in srr.noExternal to avoid some problems. You issue in this reply is totally not related to vuepress. Learn more basics with vite please.

P.S.: Questions about other tools basics with is totally not related to vuepress is not welcomed in this repo and we may omit it.

[crixx]

@Mister-Hope Please learn to read AND to understand what people write before offending them.
a) In my answer I showed how I managed to work around an issue arising if other people try to implement naive-ui too
b) obviously the issue is not related to vuepress, therefore it was opened in the vite-ssg repo
c) thus not asking for any explanation of the issue anyway

[Mister-Hope]

Actauly, any UI libarary could be used, but here are some requirements for you to check:

UI library does not require a global nomalize

VuePress pages are generated through markdown contents, which means page content are mainly standard html tag. Normalize of standard tag like ul and ol may break page appearance.

An example:

* {
  /* not all element are default content-box! */
  box-sizing: content-box
}

li {
  /* this breaks markdown list */
  list-style: none;
}

UI library is default "scoped style"

UI library should use complicated classname such as LIBRARY_NAME_ prefix, to avoid being affected by theme components styles. Also, their output reult should be "scoped" or something similar which should likely not affect other parts.

---

SImple version: if 2 ui library can be used together and they do not break each other, then they probably can work with vuepres either.

[Mister-Hope]

Just an example: https://www.naiveui.com/en-US/dark/docs/style-conflict#Disable-Preflight-Style-(CSS-Reset)

[crixx]

@Mister-Hope Thanks for your explanations on the requirements any component library may fulfil to be used with vuepress. Do you also have some concrete examples where people managed to get a component library working with vuepress? I.e are known to be easy in setup and use?

[Mister-Hope]

If you are building a theme by you own, then probably you can start to build a theme with some ui librarys as long as they follow 1 (You can handle their special styles while building your theme)

If you want those component in page, then I do think that it's better for you to write component by yourself, as you probably do not have too many complicated components as layout is already provided by theme and site content is "Markdown driven".

Importing only a few component from a library could be heavy, as most ui library extracts common methods into utils and you may import them, also there are probably unused props with codes providing extra logic bundled into your production.