State of Vue July 2022 Wrap-up

At the latest State of Vue event from This Dot Labs, our panel of Vue contributors and library authors gave us insights into some pretty large changes coming to Vue. There are some updates coming in Vue 3.3 very soon.

In this wrap-up, I'll summarize our State of Vue event with key takeaways and things to look forward to in the future!

If you'd like to see the event in full, check it out on Youtube.

Vue 3.3

Evan You kicked off this session by talking about what to look forward to in Vue 3.3. It is currently in its early phase. There are plans to make features like stable.

There are also updates to Reactivity Transform. There have been several iterations of that feature in the past, but the current version is a good place to finalize it.

These are the two major features that are going to be made stable for the 3.3 release. There are other smaller features like support for external types and built-in lazy hydration.

He also talked about a number of bags of issues that could potentially make their way into the release as well, such as issues related to Keep Alive and providing more fine-grained controls of the lifespan cache components.

These are the two major features that are going to be made stable for the 3.3 release. There are other smaller features like support for external types and built-in lazy hydration. Evan goes over how that would work using async components as code split points, meaning if an async component is not used on the initial page it will not be loaded, but it does load when it is used on the page.

Questions from panelists about 3.3

Resources

Jessica Sachs brings up questions about resources to find more focus points on what is being released in 3.3, and Evan says that resources are being aggregated, and a collection is currently in a draft. But it is still being organized, and it will come out soon.

SSR

Simone Cuomo asks about SSR if the changes are being made by their own assumptions or by the extensive use of SSR with the current version of Vue.js?

Evan goes on to talk about the needs arising from Nuxt from production use cases of Nuxt 2, and they expect that a very decent chunk of users will be opting for a full stack meta framework when they are building applications this way. SSR optimizations are going to be super important.

Suspense API

Abdelrahman Awad asks about suspense API since it recommends using async setup hook. He mentions there is an annoying issue where you try to inject something, and it breaks since it can’t recognize the current component.

Evan mentions that it has technically already been solved in script setup. When you await, the script setup compiler automatically saves the contacts before they await and then restores it after the await. If you are using script setup, then you don’t need to worry about that problem anymore.

Lazy Hydration

Bjorn Lu asks about async component lazy hydration because it seems like a very interesting new approach, and he wonders if it could be used with something similar like Astro.

Evan goes more into detail about how this process would be a very simple addition to the existing component API view. It wouldn’t just benefit SSR applications because you can use lazy hydration to delay the loading of that block as well.

The benefit of delaying the loading of the block is not like delaying the hydration work itself because hydration is strictly based on the CPU time that’s blocking the main thread. However, loading a JavaScript block without evaluating it is not that bad because it saves the time when the user actually starts interacting with it.

It would benefit anything that’s built on top of Vue, including Astro or anything similar to it.

Reactivity Transform

Thorsten Lünborg asks about the time frame concerning reactivity transform.

Evan said the plan is to ship it as stable in 3.3. He says that they may rename the $$() to make it more descriptive, but that is about the only major feature changing with reactivity transform.

He goes over the main concern about how it would be introduced and how it would be documented throughout the docs. His current idea is to ship it as stable, but keep it as an opt-in feature for people who want to use it.

Continuing Discussion

Evan goes through cases on how to decide what gets released when, and how to implement those changes because there are all types of users out there. Some are early implementers, while some wait for a stable release, and others wait until there is documentation going over what the new features are and what they do.

He explains that they try to release something that’s stable to try, but it wouldn’t completely change the old way of doing things. That way it keeps new ideas moving forward without completely changing the whole system, and simply adds new options.

The discussion continues on this subject with the panelists all having inputs during this discussion.

Audience questions

Evan takes this time to answer questions from the audience watching, which covered topics like 2.6 to 2.7 migration. He also addresses what he would change from the Vue 3 release, and the different approaches he would implement.

Other Interesting Points

Quasar Updating to new versions of different product methods. Discussion about having Live Conferences again.

Conclusion

There is a lot to look forward to with the coming release of Vue 3.3. To reiterate, 3.3 will have updates to , Reactivity Transform, and introduce lazy-loading hydration.

With any update, there may be questions that arise along the way. But if you have any further questions, please feel free to leave a comment here.

We look forward to seeing you at our next State of Vue!