What would be the benefit of rebuilding these components in Lit over using Vue to build them?
https://vuejs.org/guide/extras/web-components#building-custo...
Vue is more of a "framework" solution and has more things built-in. You can do the same things with Lit, but the implementation would look different, because you'd lean more on native APIs. A good example of that is the event model, Vue has some event model built in, but with Lit you would use EventTarget.dispatchEvent().
Lit is a runtime solution, it doesn't require a build and you can load your source directly in the browser. Vue on the other hand requires some form of compiler stage to produce something your browser can use. Compilers these days are fast, and Lit is specifically engineered to not have runtime performance overhead, so in practice this difference is rather minor. It is a very fundamental difference, so I think it's worth pointing out.
Vue can compile to other targets. If you are only delivering Web Components, this is mostly irrelevant, but in theory a consumer might be able to use the Vue components directly in their Vue project, which might give them a better DX. On the other hand, Lit is specifically designed to produce Web Components, so you'll probably have a bit less friction compares to using Vue, e.g when some Vue concept doesn't compile cleanly to Web Components.
Is there a major benefit to choosing one implementation over the other? I don't think so, unless you have a very particular requirement that one of them addresses that the other doesn't. For nearly all cases, it is just a different implementation syntax.
In most cases the only relevant metric in deciding between them is what technology your developers are more familiar/comfortable with.
https://github.com/SaleCar/Quasar-UMD-Template
You can do sophisticated things as well eg. Stream half a million Kafka records into the browser- anything available from unpkg or other cdns.
A good cdn UI lib turns out to be https://quasar.dev/
Vue _does_ have some sort of build step, because components use special macros that aren't imported, and the compiler (vite) even complains when you actually import them saying it's not necessary. The build also rewrites your code to some other format that I assume is more optimized because it can do some sort of static analysis.
Are these the main reasons for Vue to use a compiler if it's not necessary? Injecting dependencies and rewriting some code to allow better performance while retaining the nice syntax?
Adding polyfills for older browser targets.
Tree shaking, that is removing code that is not used.
Bundling several files into one to save on requests.
Transpiling, that is, if you want to write code in a different language to javascript eg. Typescript then vite will compile that to javascript.
Linting ie. Reformatting your code to standardise it across developers.
Vulnerability checking, are your dependencies out of date?
Execution of build tasks eg. Preparing static assets like images.
Packaging your app for deployment eg. Zipping
Including logging and hot reload triggers during development.
Bundling environment specific changes eg. Different backend urls if deploying to test envs.
Running unit tests on rebuild to avoid regressions.
Having said all that, the bundling for me is a disadvantage as my own code changes more than 3rd party libs and they are cached. I'm less fussed with types and a lot of the tests and env stuff can be done with a single-file express server for development.
The main advantage for me is that a buildless app will still work correctly in 6 months- permacomputing considerations.
If you can eat the cost to get something in return, it's a nice trade off.