This is a recap of the conversation at Vue Contributor Day, an event focused on the Vue ecosystem, including technologies like Vuetify, Pinia, Vitest and Quasar.
Topics covered also include Vue 3, Cypress 10, Vuetify, VueValidate, and Optional Vs Composition API.
Hosts: Simone Cuomo, Software Architect, This Dot Labs
Panelists: Luke Diebold, Lead Developer, Agripath | Creator of quasarcast.com John Leider, Author & Founder, Vuetify Jessica Sachs, Staff Engineer, Cypress Maya Shavin, Senior Software Engineer, Microsoft Abdelrahman Awad, Software Engineer, Rasayel Paolo Caleffi, Quasar Core Team, Co-Founder, Dreamonkey Liam DeBeasi, Lead Developer, Ionic Framework Sybren Willemot, Front-end developer at Euricom
You can watch the full Vue Contributor Day event on This Dot's YouTube Channel.
New Vuejs Update and Roadmap
VueJs Updates
- Massive patch release in 3.2.34~36, ~70 PRs merged, ~140 issues closed
- Vue 2 moved to TypeScript
- Work on 2.7 underway, Composition API partial tests passing +
script setupplanned - 3.3 after 2.7
- finalize Suspense
- finalize Reactivity Transform
- support imported types in
script setupdefine APIs - SSR Improvements
- lazy/on-demand hydration of async component sub-trees
- improved hydration mismatch warnings
VueJs Roadmap
- Future explorations
- Solid.js inspired compilation strategy
- very early stage
- no virtual dom, extremely performant
- compatible with current SSR output
- Solid.js inspired compilation strategy
Also, the SFC sfc.vujs.org playground now supports SSR reproductions, running the entire compile - render - hydrate process directly in the browser.
Vue 3 transition and Adoptation
Vue 3 is built on Typescript, which gives most library authors the opportunity to integrate TypeScript as they migrate to Vue 3. Other updates include Vue store, the Vue team adopting Pinia as the recommended library, and Vitest adoption by the community.
Update VueValidate Due to the transition time for developers and libraries in the ecosystem, developers were experiencing a mismatch of versions when migrating with Vue Validate.
Update Quasar Quasar is among the earliest adopters of Vue 3, having supported it since February 2021. However it has taken some time to adopt all Quasar app extensions.
Update on Ionic Vue Ionic Vue supported Vue 3 since its initial release. The challenge the ecosystem faced was migrating some third party libraries that people wanted to use, but were yet to support Vue 3.
Update for Vuetify Vuetify for Vue 2 focused on render functions, and migrating to Vue 3 was a challenge. But as it progressed, the team was able to figure out a way to integrate TSX, which allowed the team to accelerate the current status of the Vuetify migration.
Update for Chakra Vue Chakra Vue is still in Alpha, but the team is building it from scratch to provide Typescript support, and Vue 3 support out-of-the-box.
Pinia Some of the benefits of Pinia, as stated in the documentation, include:
- DevTool supports with Pinia, which support better debugging with zero configuration features like:
- Timeline to track actions and mutation
- Visual appearance of stores in the component in which they used
- Time travel
- Hot Module Replacement
- Server Side Rendering support
- Proper TypeScript support or auto completion
Options API vs Composition API
Options API Vue Options API is using options such as data, methods, and mounted to write Vue components.
// Options API
export default {
data() {
return {
name: 'John',
};
},
methods: {
doIt() {
console.log(`Hello ${this.name}`);
},
},
mounted() {
this.doIt();
},
};
Composition API The Composition API is a set of APIs that allow developers to author Vue components using imported functions instead of declaring options.
// Composition API
export default {
setup() {
const name = ref('John');
const doIt = () => console.log(`Hello ${name.value}`);
onMounted(() => {
doIt();
});
return { name };
},
};
There are some key differences between Composition API and Options API. With the Composition API, we have a single setup hook in which we write our reactive code, while options use data, methods, and mounted.
The debate
- Composition API is an overhead and may be too much for developers.
- Options API would be more organized for developers.
- Composition has a bit of a learning curve for developers from Vue 2 to Vue 3.
- Composition API provides a better approach for code refactoring.
- Composition API has better compatibility with Typescript.
- Options API gives a bit of structure for developers.
Updates
Quasar Quasar Conf is coming this July, and the Call for Papers has just been announced. Check Quasar's Twitter for the link if you would like to give a talk at the conference.
Other updates for Quasar Framework:
- Quasar now supports Pinia out of the box
- Cypress component testing support out-of-the-box
- Quasar now has code coverage out of the box, currently working only with Vite
Vue Chakra
- Vue Chakra is still in alpha stage with a workable version so the team is focusing on Documentation
- Implementing new component and some composables to use
- The team is prioritizing maintenance
- Chakra Vue Component will be work with ZagJS
Ionic Vue
- Ionic just completed their annual conference. Check the Ionic website for the recording.
- Ionic has over 160,000 apps built with Ionic on the App Store.
- Ionic 6.1 was just released with some improvements to date, component, and others.
- With Capacitor, Ionic just released a brand new native Google Maps for building applications with maps.
Cypress
- Cypress 10 will be released on June 1st with a brand new UI built in Vue 3 and Typescript.
- Cypress 10 uses a Vite based template.
- Component testing is now in beta.
- Improvements include Module and Typescript Support.
Conclusion
Other updates mentioned during this event include Nuxt 3 moving to a soon to be released stable version.
This was an incredible conversation with a great group of guests, and I would highly suggest you watch the video to hear more about updates from the ecosystem.
You can watch the full Vue Contributor Day event on This Dot Media's YouTube Channel.
About the author
