Vue Vapor mode and Options API

[mezozawahra]

I read an old vue blog that vapor mode will only support composition API, will this be just the initial release and then options API will supported in future releases, and if a project is using vapor mode and some components are written in options api will that cause an error or a fallback where will it cause parts of the application to use VDOM.
It is obvious that vapor mode is the future of vue, so dropping support for Options API seems like killing it and forcing to move to composition api.

[edison1105]

vapor mode will only support composition API

this means the vapor component only supports composition API

in the vapor component, you can render any VDOM component(including components written in options API)
see Playground with vapor branch

[mezozawahra]

Thank you for your reply,
But will options API be supported in the future ? according to vue it is just a layer on top of composition, doesn't that mean options api can be convert to composition api and from there compiled to Vapor code ?

In fact, the Options API is implemented on top of the Composition API! The fundamental concepts and knowledge about Vue are shared across the two styles.

Moreover, many large projects use both composition and options api in it. This will lead to not being able to fully benefit from the Vue Vapor feature which is reducing bundle size by dropping the VDOM reconciliation engine code, and needless not to say DOM manipulation operations performance.

[edison1105]

But will options API be supported in the future ?

Will not support.

If performance is of concern, vapor component should be used entirely instead of the mixed-use of VDOM and vapor components

[dysphasia]

What is the reason for not supporting the Options API? Won't mixing the two negate the other benefit of vapor mode, the smaller run time bundle?

Is there any chance of reconsidering this decision?

If performance is of concern, vapor component should be used entirely instead of the mixed-use of VDOM and vapor components

This philosophy has damaged many other projects and communities in the past. Hopefully Vue won't be next, but it is playing catch-up here to newer frameworks. Putting developers in a position where they need to change how they work just to be at parity with other projects is a great opportunity for them to just abandon Vue altogether.

[absidue]

What is the reason for not supporting the Options API?

Vapor mode relies heavily on compile time code generation, which means that the components have to be statically analysable and where that isn't the case it falls back to VDOM mode. The options API is significantly harder to statically analyse than the composition API, so much so that the Vue compiler currently dumps Options API code into the output as-is, whereas for <script setup> it can generate more efficient code such as directly referencing variables and functions in <script setup> from the template and not adding unwrapping code for constants.

There is also the fact that with the Options API everything is deeply reactive by default, so you are already at a disadvantage to the composition API where you have fine-grained control over what should be reactive.

With the composition API everything you want to use in the template has to be declared at the top-level, whereas the Options API, because it relies on objects, allows you to dynamically add properties and methods e.g. destructuring from Pinia's mapState() and mapActions(), which wouldn't be statically analysable.

So in other words some extremely basic Options API components may be statically analysable to a certain degree, but as that would likely be a small number of real world components, it's probably not worth the effort to write Vapor mode support for such a small set of use cases.

[mezozawahra]

The options API is significantly harder to statically analyse than the composition API

Does this also apply to non <script setup> Composition API, I read in this article, that

As part of the efforts to improve performance and drop the baseline runtime size, Vapor Mode will only support the composition API and only with<script setup>.

is the article outdated or really won't there be explicit setup() function syntax vue vapor ?