Working with a large Vue 3 project and wanting to share some of our components as re-usable web components for other sites to embed...

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...

▲

rs186 7 days ago | parent | next [-]

I have used both. Personally I prefer Vue a bit more.

* Built-in state management especially as in v3 (ref/reactive) is super powerful, and you can test the setup function logic by itself without any dependency on DOM which is convenient. By comparison, reactivity in Lit is basic (by design), and mostly work on the widget level -- if something changes, you need to trigger the update process of the widget.

* The lifecycle is also a bit simpler. In Lit, you often need to work with lifecycle callbacks like firstUpdated, connected, shouldUpdate, updated, disconnected etc. (You don't need to implement these for simpler widgets, but often you have to.) You can easily run into bugs if you are not careful, especially in the less common situation where your widget can be both temporarily and permanently removed from the DOM, in which case you need to make sure the state of the widget is properly perserved, which isn't a thing you need to worry about in Vue. We got bitten by this multiple times.

Unless there is a strong technical reason, I suggest that you focus on shipping features instead of changing your tech stack. Rebuilding your widgets is a very time consuming task with, well, near 0 impact on the user.

	▲	mulhoon 7 days ago \| parent [-]
		Thanks for this. I think you're right -> "focus on shipping features instead of changing your tech stack"

▲

Ruphin 7 days ago | parent | prev | next [-]

I don't know if there is a particular benefit, it's just different. On the consumer side there is no difference, because they consume Web Components, and that is what both solutions deliver. On the implementation side, I can think of a few differences:

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.

▲

rs186 7 days ago | parent | next [-]

Vue can be used as an ordinary JS library without special build setup. You can even load the library from a CDN as a global variable like the old jQuery days.

▲

alexisread 7 days ago | parent [-]

Thought I'd add an example:

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/

▲

Ruphin 7 days ago | parent [-]

Oh nice, I wasn't aware this was even possible.

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?

	▲	alexisread 7 days ago \| parent \| next [-]
		It's a combination of things. 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.
	▲	Muromec 7 days ago \| parent \| prev [-]
		IRRC Vue will compile your templates on the fly if you don't pre-compile them, so you will be punished twice -- in performance and in bundle size for skipping the build step. If you can eat the cost to get something in return, it's a nice trade off.

▲

mulhoon 7 days ago | parent | prev [-]

Thanks for the in-depth response, much appreciated

▲

Muromec 7 days ago | parent | prev [-]

>Working with a large Vue 3 project and wanting to share some of our components as re-usable web components for other sites to embed...

Make a fat bundle with a web component or even a mount() function exported and run whatever fits your devx inside, with the API surface as narrow as possible. As long as it's self contained and the size is reasonable, nobody on a consumer side cares how you cook, so optimize your own pipelines to build, test and publish it.

People will build adapters to fit it into their stuff anyway and will let you know.