JS Marathon

State of Vue Wrap-up

Tyrel Chambers
2 min read
State of Vue Wrap-up
This article was written over 18 months ago and may contain information that is out of date. Some content may still be relevant, but please refer to official documentation for the latest information.

State of Vue recently wrapped up. Our Vue contributors and library authors gave us insights into some pretty large changes coming to Vue. There's a new state management player where Pinia will be taking over instead of VueX, a new way of writings scripts which seems to be picking up steam, and other changes we think are interesting.

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.

Pinia replacing VueX 4

Pinia is VueX 4 successor. There won't be a VueX 5 because that's what Pinia is. It has a slightly different API, and works very well with Typescript.

There are some arguments around whether useing VueX would be better for larger, complex projects, but Pinia is definitely becoming very popular in its own right. The main point for using Pinia over VueX 4 relates to Typescript users. VueX 4 does not work well with Typescript; Pinia aims to fix that.

Keep an eye out for Pinia. There will also be documentation changes in VueX 4 to inform developers of this namechange, and that Pinia will be a VueX 4 upgrade.

Volar

Volar is being sponsored by Evan You for full-time work. Some of this works includes refactoring the internals of the language service. This refactor will help open the door for contributions in the near future.

If you'd like to follow Johnson on Twitter as he works on Volar, you can follow him at @johnsoncodehk.

Script Setup vs Composition API

Script setup was hoping to became the “new way” of writing, and the community seems to be working in that direction. The State of Vue panelists agree that using script setup is more exciting to write with, and offers greater flexibility.

Reactivity transform

  • Allows props to be destructured (with default values too) while still being reactive
  • Type-safe
  • Assignment based reactivity
  • Docs
  • Discussions

Other interesting points

About the author

Tyrel Chambers

Tyrel Chambers

Software Engineer

Software Engineer passionate about developing cool ideas and pizza

Keep reading

View all posts →

Awesome 3D experience with VueJS and TresJS: a beginner's guide

Unleash the power of 3D in your Vue.js projects with Tres.js! The future of immersive web experiences is here. #Vuejs #3Ddevelopment...

Mattia Magi5 mins
Vue3D

3 VueJS Component Libraries Perfect for Beginners

For developers checking out VueJS for the first time, the initial steps are overwhelming, particularly when setting up projects from square one. But don’t worry! The VueJS ecosystem offers a plethora of remarkable component libraries, easing this early obstacle. These three libraries are pre built toolkits, providing beginners with the means to kickstart their VueJS projects effortlessly. Let’s take a look! Quasar Quasar is among the most popular open source component libraries for Vue.js, offering a comprehensive set of ready to use UI components and tools for building responsive web applications and websites. Designed with performance, flexibility, and ease of use in mind, Quasar provides developers with a wide range of customizable components, such as buttons, forms, dialogs, and layouts, along with built in support for themes, internationalization, and accessibility. With its extensive documentation, active community support, and seamless integration with Vue CLI and Vuex, Quasar empowers developers to rapidly prototype and develop high quality Vue.js applications for various platforms, including desktop, mobile, and PWA (Progressive Web Apps). PrimeVue PrimeVue is a popular Vue.js component library offering a wide range of customizable UI components designed for modern web applications. Developed by PrimeTek, it follows Material Design guidelines, ensuring responsiveness and accessibility across devices. With features like theming, internationalization, and advanced functionalities such as lazy loading and drag and drop, PrimeVue provides developers with the tools to create elegant and high performing Vue.js applications efficiently. Supported by clear documentation, demos, and an active community, PrimeVue is an excellent choice for developers seeking to streamline their development process and deliver polished user experiences. Vuetify Vuetify is a powerful Vue.js component library that empowers developers to create elegant and responsive user interfaces with ease. Built according to Google's Material Design guidelines, Vuetify offers a vast collection of customizable UI components, ranging from buttons and cards to navigation bars and data tables. Its comprehensive set of features includes themes, typography, layout grids, and advanced components like dialogues and sliders, enabling developers to quickly build modern web applications that look and feel polished. With extensive documentation, active community support, and ongoing development, Vuetify remains a top choice for Vue.js developers seeking to streamline their workflow and deliver visually stunning user experiences. For newcomers venturing into Vue.js, the initial setup might seem daunting. Thankfully, Vue.js offers a variety of component libraries to simplify this process. Quasar, PrimeVue, and Vuetify are standout options, each providing pre built tools to kickstart projects smoothly. Whether you prefer Quasar's extensive UI components, PrimeVue's Material Design inspired features, or Vuetify's responsive interfaces, these libraries cater to diverse preferences and project requirements. With their clear documentation and active communities, these libraries empower developers to start Vue.js projects confidently and efficiently, enabling Vue developers to create polished user experiences....

2 mins
VuetifyVueQuasar

Understanding Vue.js's <Suspense> and Async Components

In this blog post, we will delve into how <Suspense> and async components work, their benefits, and practical implementation strategies to make your Vue.js applications more efficient and user-friendly...

Jesús Padrón6 mins
VueWeb PerformanceUXJavaScript

Getting started with Vitepress

Create your static blog site using Vitepress. Setup and configure your site in minutes by following this step-by-step tutorial....

Simone Cuomo12 mins
VueViteVitepress