VueJS

VueJS Updates - October 2021

Published Oct 20, 2021

Updated Feb 16, 2023

5 min read

This article was written over 18 months ago and may contain information that is out of date. Some content may be relevant but please refer to the relevant official documentation or available resources for the latest information.

🌱 Introduction

What’s new in Vue?

What new frameworks are available for software developers building futuristic products?

How is Vue catching up to changes in the technological ecosystem, and improving on processes, systems, and experience?

If you are curious to know what’s new in the Vue ecosystem, read on to discover new updates, developments and high-level plans discussed in this edition of Vue Contributor Days, hosted by Tracy Lee, Evan You, and Simone Cuomo. If you would rather watch the full event, you can find it here.

First off, let’s have a quick glance at the cool panellists featured in this edition.

The Panelists Highlight:

Ben Hong - Senior DX Engineer, Netlify & Vue Core Team Member
John Leider - Author & Founder, Vuetify
Rahul Kadyan - Software Engineer & Vue Core Team Member
Kia King Ishii - Director, Global Brain & Vue Core Team Member
Thorsten Lünborg - Product Owner @ MVV Enamic & Vue Core Team Member
Haoqun Jiang - Open Source Developer, Vue Technology LLC & Vue Core Team Member / Vue CLI maintainer
Guillaume Chau - Vue Core Team Member
Kazuya Kawaguchi - Software Engineer, PLAID, Inc & Author of Vue i18n
Anthony Fu - Core team member, Vue & Vite
Daniel Roe - Framework Architect, Nuxt
Carlos Rodrigues - Consultant
Filip Rakowski - Co-founder/CTO, Vue StoreFront
Liam DeBeasi - Lead Developer, Ionic Framework
Maya Shavin - Senior Software Engineer, Microsoft & Nuxt. js Ambassador
Luke Diebold - Lead developer, Agripath & Quasar Core Team
Jonathan Bakebwa - Creator of Chakra UI & UI Engineer rct.ai
Paolo Caleffi - Co-Founder, Dreamonkey & Quasar Core Team
Yaël Guilloux - VueUse & Nuxt Contributor
Fred Schott - Creator of Astro

Now let’s dive in!

🌱 Vue 3.2

3.2 Released in August

(Script setup) is out of experimental
(style) v-bind
Define custom element ()
Reactivity performance ++
Effect scope API
ESM build + improved streaming API for @vue/server - renderer
V-memo for advanced performance optimization

NEW RFCs

Ref Transform Vuejs/rfcs/discussions/369
Props Destructure Transform Vuejs/rcfs/discussions/394 Vuejs/vue-next/pu11/4690

New documentation (WIP)

https://github.com/vuejs/docs/free/next
Staging Deployment is available at https://vue-docs-preview.netlify.app/guide/introduction.html
Dark mode is now available
More User focus
A new introduction: Vue as a framework
Better Learning path
Single-file component and different API preferences

New Default Recommendations

Vue-cli => create-vue (vite based)
Vetur => Velar
State Management: consolidate Vuex-next, Pina, core

SSR Focused

Async Component Hydration Strategies
Other Hydration / Payload Improvements
Suspense Finalization## 👩‍💻

🌱 Comunity updates

👩‍💻 IONIC VUE(Liam DeBeasi - Lead Developer, Ionic Framework)

Updates to Ionic/Vue V6
New Components, example: Accordions, Breadcrumbs, etc
Updated to new IOS designs
Added support for Vite
updates to CapacitorJS
Updates to StencilJS

👩‍💻 Vue i18n (Kazuya Kawaguchi - Software Engineer, PLAID, Inc & Author of Vue i18n)

Current stable version is 9.1.9
It supports Vue 3
Typescript support

👩‍💻 Astro (Fred Schott - Creator of Astro)

Checkout https://astro.build/. It supports Vue.

👩‍💻 QUASAR (Luke Diebold - Lead developer, Agripath & Quasar Core Team)

Vue 3 Support
Volar Support
Vite Support in progress
Core App Extensions Migration are nearly complete, A Popular example is Qcalendar.
Static Site Generator(SSG) Freddy38510/quasar-app-extension-ssg
Cypress component testing integration, still in Alpha.
Visit Quasarcast.com to learn about version 2. Everything is free.
QuasarNews.com (Podcast) Coming soon.
72+ component series in Quasar Components(QuasarComponents.com).

👩‍💻 VUE Storefront (Filip Rakowski - Co-founder/CTO, Vue StoreFront)

Building high-quality tools to help developers build an amazing e-commerce storefront.
Vue Storefront Middleware and UI.
Vue Storefront Platform to host and analyze on the storefront.

👩‍💻 Nuxt (Daniel Roe - Framework Architect, Nuxt)

Nuxt 3 Public beta https://v3.nuxtjs.org/
Nuxt Cli
Nuxt ecosystem is now ESM

👩‍💻 VUETIFY (John Leider - Author & Founder, Vuetify)

Updates to the Form component.
New validation system, selection controls, checkboxes, different filtering methods on different types of data.
Update to Autocomplete component.
New component for Nested functionality.
Vite plugin.
SAAS Interfacing: updated from import to modules so it’s more intuitive for modification of the frameworks or utility classes.
It supports the different compile methods for overriding variables.
It works with Vue CLI.
A new vite SSR documentation.

👩‍💻 CHAKRA U.I (Jonathan Bakebwa - Creator of Chakra UI & UI Engineer rct.ai)

CHAKRA U.I/ VUE NEXT VI Alpha release is out and in use for production and mostly relies on the theme API

Base style overrides and custom variants.
Partial back-port to @^0.10.2
Mode utility.
V2 early development with UI machines.
State machines to write Vue composition API hooks.
CHAKRA U.I Extract for Zero- runtime styling API.

👩‍💻 Nuxt (Anthony Fu - Core team member, Vue & Vite)

🧠 Have Any Questions

🙋‍♀️ If you have any questions or things to share? Use #VueContributorDays on Twitter and talk with us!

📺 View the replay here for the full update on the Vue Ecosystem! 🤝

This Dot is a consultancy dedicated to guiding companies through their modernization and digital transformation journeys. Specializing in replatforming, modernizing, and launching new initiatives, we stand out by taking true ownership of your engineering projects.

We love helping teams with projects that have missed their deadlines or helping keep your strategic digital initiatives on course. Check out our case studies and our clients that trust us with their engineering.

About the author(s)

Adesoji Temitope
@temitopedavid_@temitopeadesoji

Color Theory For Software Engineers + Color Accessibility & Performance with Sarah Shook

In this episode of the Modern Web podcast, Tracy Lee and Rob Ocel sit down with Sarah Shook, a UI/UX engineer at Hunter Industries. They discuss the topic of Sarah’s THAT Conference talk on color theory, exploring the intricacies of RGB, HSL, and hex color models. The discussion also touches on the importance of understanding how color accessibility impacts your page’s performance. Chapters - 00:00 - Introduction and Guest Introduction - 01:30 - Balancing Work and Parenthood - 03:20 - Family-Friendly Conferences and THAT Conference Experience - 05:45 - Overview of Sarah's Presentation on Color Theory - 07:00 - Understanding Additive and Subtractive Color Models - 09:00 - RGB to Hex Conversion Explained - 11:45 - Importance of Color Theory in Web Development - 14:00 - Accessibility and Color Luminescence - 16:00 - Tools and Resources for Color Accessibility - 18:30 - Sarah’s Experience with Vue and Other Frameworks - 21:00 - Discussion on Framework Deployment and Tooling - 23:15 - The Challenges and Benefits of Learning Multiple Frameworks - 25:00 - Tailwind, TypeScript, and Framework Preferences - 27:00 - Vue Community and Tooling Insights - 29:00 - Advanced JavaScript and TypeScript Content with DropJS - 31:00 - Sarah’s Color Utility Project and Where to Find Her - 32:30 - Closing Thoughts and Outro Follow Sarah Shook on Social Media Twitter: https://x.com/shookcodes Linkedin: https://www.linkedin.com/in/sarahshook/ Github: https://github.com/shookcodes Sponsored by Wix Studio...

Aug 27, 2024

1 min

JavaScriptVueReact

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

In this blog post, we will delve into how and async components work, their benefits, and practical implementation strategies to make your Vue.js applications more efficient and user-friendly. Without further ado, let’s get started! Suspense Let's kick off by explaining what Suspense components are. They are a new component that helps manage how your application handles components that need to await for some async resource to resolve, like fetching data from a server, waiting for images to load, or any other task that might take some time to complete before they can be properly rendered. Imagine you're building a web page that needs to load data from a server, and you have 2 components that fetch the data you need as they will show different things. Typically, you might see a loading spinner or a skeleton while the data is being fetched. Suspense components make it easier to handle these scenarios. Instead of manually managing loading states and error messages for each component that needs to fetch data, Suspense components let you wrap all these components together. Inside this wrapper, you can define: 1. What to show while the data is loading (like a loading spinner). 2. The actual content that should be displayed once the data is successfully fetched. This way, Vue Suspense simplifies the process of handling asynchronous operations (like data fetching) and improves the user (and the developer) experience by providing a more seamless and integrated way to show loading states and handle errors. There are two types of async dependencies that can wait on: - Components with an async setup() hook. This includes components using with top-level await expressions. *Note: These can only be used within a component.* - Async Components. Async components Vue's asynchronous components are like a smart loading system for your web app. Imagine your app as a big puzzle. Normally, you'd put together all the pieces at once, which can take time. But what if some pieces aren't needed right away? Asynchronous components help with this. Here's how they work: - Load Only What's Needed: Just like only picking up puzzle pieces you need right now, asynchronous components let your app load only the parts that are immediately necessary. Other parts can be loaded later, as needed. - Faster Start: Your app starts up faster because it doesn't have to load everything at once. It's like quickly starting with the border of a puzzle and filling in the rest later. - Save Resources: It uses your web resources (like internet data) more wisely, only grabbing what’s essential when it's essential. In short, asynchronous components make your app quicker to start and more efficient, improving the overall experience for your users. Example: ` Combining Async Components and Suspense Let's explore how combining asynchronous components with Vue's Suspense feature can enhance your application. When asynchronous components are used with Vue's Suspense, they form a powerful combination. The key point is that async components are "suspensable" by default. This means they can be easily integrated with Suspense to improve how your app handles loading and rendering components. When used together, you can do the following things: - Centralized Loading and Error Handling: With Suspense, you don't have to handle loading and error states individually for each async component. Instead, you can define a single loading indicator or error message within the Suspense component. This unified approach simplifies your code and ensures consistency across different parts of your app. - Flexible and Clean Code Structure: By combining async components with Suspense, your code becomes more organized and easier to maintain. An asynchronous component has the flexibility to operate independently of Suspense's oversight. By setting suspensible: false in its options, the component takes charge of its own loading behavior. This means that instead of relying on Suspense to manage when it appears, the component itself dictates its loading state and presentation. This option is particularly useful for components that have specific loading logic or visuals they need to maintain, separate from the broader Suspense-driven loading strategy in the application. In practice, this combo allows you to create a user interface that feels responsive and cohesive. Users see a well-timed loading indicator while the necessary components are being fetched, and if something goes wrong, a single, well-crafted error message is displayed. It's like ensuring that the entire puzzle is either revealed in its completed form or not at all rather than showing disjointed parts at different times. How it works When a component inside the boundary is waiting for something asynchronous, shows fallback content. This fallback content can be anything you choose, such as a loading spinner or a message indicating that data is being loaded. Example Usage Let’s use a simple example: In the visual example provided, imagine we have two Vue components: one showcasing a selected Pokémon, Eevee, and a carousel showcasing a variety of other Pokémon. Both components are designed to fetch data asynchronously. Without , while the data is being fetched, we would typically see two separate loading indicators: one for the Eevee Pokemon that is selected and another for the carousel. This can make the page look disjointed and be a less-than-ideal user experience. We could display a single, cohesive loading indicator by wrapping both components inside a boundary. This unified loading state would persist until all the data for both components—the single Pokémon display and the carousel—has been fetched and is ready to be rendered. Here's how you might structure the code for such a scenario: ` Here, is the component that's performing asynchronous operations. While loading, the text 'Loading...' is displayed to the user. Great! But what about when things don't go as planned and an error occurs? Currently, Vue's doesn't directly handle errors within its boundary. However, there's a neat workaround. You can use the onErrorCaptured() hook in the parent component of to catch and manage errors. Here's how it works: ` If we run this code, and let’s say that we had an error selecting our Pokemon, this is how it is going to display to the user: The error message is specifically tied to the component where the issue occurred, ensuring that it's the only part of your application that shows an error notification. Meanwhile, the rest of your components will continue to operate and display as intended, maintaining the overall user experience without widespread disruption. This targeted error handling keeps the application's functionality intact while indicating where the problem lies. Conclusion stands out as a formidable feature in Vue.js, transforming the management of asynchronous operations into a more streamlined and user-centric process. It not only elevates the user experience by ensuring smoother interactions during data loading phases but also enhances code maintainability and application performance. I hope you found this blog post enlightening and that it adds value to your Vue.js projects. As always, happy coding and continue to explore the vast possibilities Vue.js offers to make your applications more efficient and engaging!...

Apr 24, 2024

6 mins

VueWeb PerformanceUXJavaScript

Rendering Modes in Nuxt 3

Nuxt is an open source framework to make your Vue.js applications. Currently, Nuxt 3 has a release candidate and the stable version would be out soon. In this series, I would be taking us through Nuxt 3 concepts and APIs. In this first part, we would focus on rendering modes in Nuxt 3. Setup To quickly install Nuxt 3, lets use the nuxt 3 documentation. Rendering modes Nuxt 3 offers a couple of different rendering modes: - Universal Rendering - Client-side rendering - Hybrid rendering Each of this rendering modes have their use cases and benefits. In this article, we will take a look at their pros, and how to implement them in Nuxt 3. Universal Rendering Universal rendering allows for code to be pre-rendered at build time or rendered on the server before it is served to the client on request. This results in very fast pages, because rendering on the server is faster and the user gets content on page load compared to Client-Side only rendering. Nuxt 3 also improves this greatly by allowing code to be rendered not just on node-js servers, but also on CDN edge workers. This increases the site speed, and also helps reduces cost. In Universal rendering, we can use pre-rendering. This means we can have some pages, or all pages, pre-rendered on build time, and other pages rendered at request time. This is a great choice for static pages like website landing pages, blogs and some dynamic pages that don’t change often and have a finite number of pages. Universal mode with server side rendering is best for sites with highly dynamic content that changes frequently, like ecommerce sites. Pros Search Engine Optimization: Universal rendered apps serve the page with the generated html content to the browser. This makes it easy for web crawlers to index such pages. Performance: The performance of Universal rendered apps are fast compared to Client-side rendered apps because the page already contains the HTML code, and this does not rely on the users device to parse and render the HTML. To deploy and use our Nuxt 3 application on a node-server in universal mode: First in nuxt.config.js file ` By default, SSR is set to true if it is not passed in the nuxt.config.js file. Also, preset is set to ‘node-server’ by default, but this can be changed to suit the deployment environment. For example, Vercel preset should be used for Vercel deployment. You can read here for available deployment presets. When we run our build command: ` This will generate the output folder with the app's entry point file. Next, we can run the file with Node. ` or ` To deploy and use our Nuxt 3 application on a static server in universal mode: First, in our nuxt.config.js file, we specify the pages to be generated: ` Now we can run our generate command: ` This will generate the output folder '.output/public' with the pages files and the related JS and CSS files. We can simply place this folder into any static hosting service, and access our application. To generate our routes async, like a blog website, we can fetch our routes and then pass it to the route during build with this hook. ` Client side rendering Client side rendering involves sending every request to a single file, usually ‘index.html’, with empty content and then linking them to the corresponding JS bundles, allowing the browser perform the parsing and rendering of the HTML. Client side rendering is a great choice for heavily interactive websites with animations, like online gaming sites, Saas sites, etc. Pros Offline support: Client-side rendered apps can run offline once the dependent JavaScript files are downloaded if there is no internet. It is easy to make a client side rendered app a Progressive web app. Cheap: Client-side rendered apps are the cheapest in terms of hosting as you do not need to run a server. They are made up of HTML and JS files which can be served from a static server. To config our Nuxt 3 app to be fully client side rendered: First in nuxt.config.js file ` Now we can run our generate command: ` This will generate the output folder '.output/public/index.html' with the apps entry point file and the related js files. We can simply place this folder onto any static hosting service, and access our application. Hybrid rendering Hybrid rendering is an unreleased Nuxt 3 feature that allows developers to configure different rendering modes for different pages. This should be available later this year, and we will explore it in this series once it is. For more official information about the hybrid rendering discussion. In the next article, we will implement a simple webpage using the universal rendering. The webpage will have a blog which will be prerendered, and also a dynamic user page which will be server rendered. --- I hope this article has been helpful to you. If you encounter any issues, you can reach out to me on Twitter or Github....

Oct 24, 2022

4 mins

NuxtJSVue

Learning Paths for Next.JS Developers with Ankita Kulkarni

In this video, Rob Ocel and co-hosts Tracy Lee, Adam Rackis, and Danny Thompson talk with tech educator Ankita Kulkarni about her journey from engineering leader to full-time educator. Ankita shares insights on teaching Next.js, bridging practical knowledge gaps, and helping developers tackle real-world challenges. They discuss Next.js as a React-based framework, its benefits, and the challenges it presents for beginners. Chapters - Introduction to the Podcast and Guests 00:01 - Meet Ankita Kulkarni, Tech Educator 00:26 - Ankita's Transition to Full-Time Education 01:41 - Teaching Practical Knowledge in Next.js 03:19 - Effective Methods for Teaching Next.js 05:27 - Challenges of Being a Full-Time Educator 07:48 - Balancing Broad and Specific Examples 09:54 - Embracing Mistakes as a Teaching Tool 12:13 - Pair Programming and Mentorship 14:00 - Discussion on Next.js and Framework Adoption 16:48 - Advantages and Challenges of Next.js 18:12 - Choosing the Right Framework for Your Needs 20:35 - Impact of Next.js in React Documentation 22:26 - Learning Paths for New Developers 23:24 - The Rise of Full-Stack Web Development 25:09 - Benefits of Frameworks Abstracting Complexity 26:27 - OpenNext and Deployment Flexibility 28:06 - Ankita's Excitement for New Next.js Features 30:35 - The Future of Next.js Without Vercel 32:16 - Final Thoughts and Where to Find Everyone Online 34:21 Follow Ankita Kulkarni on Social Media Twitter: https://x.com/kulkarniankita9 YouTube: https://www.youtube.com/@kulkarniankita Sponsored by This Dot: thisdot.co...

Nov 12, 2024

2 mins

NextJSJavaScript

Let's innovate together!

We're ready to be your trusted technical partners in your digital innovation journey.

Whether it's modernization or custom software solutions, our team of experts can guide you through best practices and how to build scalable, performant software that lasts.

VueJS Updates - October 2021

🌱 Introduction

🌱 Vue 3.2

🌱 Comunity updates

👩‍💻 IONIC VUE(Liam DeBeasi - Lead Developer, Ionic Framework)

👩‍💻 Vue i18n (Kazuya Kawaguchi - Software Engineer, PLAID, Inc & Author of Vue i18n)

👩‍💻 Astro (Fred Schott - Creator of Astro)

👩‍💻 QUASAR (Luke Diebold - Lead developer, Agripath & Quasar Core Team)

👩‍💻 VUE Storefront (Filip Rakowski - Co-founder/CTO, Vue StoreFront)

👩‍💻 Nuxt (Daniel Roe - Framework Architect, Nuxt)

👩‍💻 VUETIFY (John Leider - Author & Founder, Vuetify)

👩‍💻 CHAKRA U.I (Jonathan Bakebwa - Creator of Chakra UI & UI Engineer rct.ai)

👩‍💻 Nuxt (Anthony Fu - Core team member, Vue & Vite)

🧠 Have Any Questions

Adesoji Temitope

You might also like

Color Theory For Software Engineers + Color Accessibility & Performance with Sarah Shook

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

Rendering Modes in Nuxt 3

Learning Paths for Next.JS Developers with Ankita Kulkarni

Let's innovate together!

You might also like

Color Theory For Software Engineers + Color Accessibility & Performance with Sarah Shook

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

Rendering Modes in Nuxt 3

Learning Paths for Next.JS Developers with Ankita Kulkarni