Vue Conf US Day 1 Summary

Vue Conf US has officially finished it’s first day ? and there were some super insightful talks. In this article, I’ll share the highlights of each.

State of Vuenion - Evan You

To kick off the conference, Evan gave a great update on the status of Vue. There was talk of the long anticipated Vue 2.7 version to backport support of the Composition API. Along with CAPI, 2.7 will include improved TypeScript support and script setup.

Evan also spoke about the upcoming 3.3 release. 3.3 will boast stable suspense support, stable reactivity transform, and some SSR improvements. It is slated for release Q3 2022.

The most exciting piece of news concerns a novel compilation strategy that excludes the use of a virtual DOM. The strategy is inspired by SoildJS and has the potential to lower memory usage, improve performance, create a lighter base runtime size, and more.

Dates to Know

• Vue 2.7 beta release - end of June 2022
• Vue 3.3 - Q3 2022
• Vue 2 End of Life - 2023 end of year

How Vite Changes the Game for Vue and Web Developers - Alex Kyriakidis

After Evan, Alex took the stage and talked about Vite. He gave insight on how it improves the developer experience with it’s blazing speed. Vite utilizes browser support for ESM modules to ship JavaScript directly to the browser without much of the compilation needed in tools like webpack.

Key Takeaways

• Vite does replace Vue-CLI (Vue CLI is now in maintenance mode)
• Nuxt 3 will support Vite by default
• Vitest provides a zero-config unit testing solution for Vite projects
• Histoire provides a new fast experience for writing component stories

Unit Testing Vue Apps: Tips, Tricks, and Best Practices - Beth Qiang

Beth Qiang, from Lob, gives some great advice on how to write better code with unit tests. Advantages of doing such testing includes documentation of expected behaviors, a safety net again regression issues, verification of requirements, and cleaner, more focused code.

Some Important Tips

• simple tests make finding what failed easier
• use a render component utility function to keep tests DRY
• scaffold out describe and it blocks first

Relevant tools

• Vitest
• Vue Test Utils
• Testing Library

Create a Custom Component Library with Vue - Paige Kelley

Paige Kelley, speaks on a topic near and dear to the heart of many front-end devs: UI libraries. Since the conference is hosted in Florida, the library get’s a nice Florida theme. During the talk, she explains how to combine Tailwind CSS with Vue.js to create a component library. Not only does she provide great information about building the components themselves, but also goes over how to publish the library to npm.

Some Important Tips

• use directories for each UI component (such as button) to contain the component itself, plus stories, and related resources
• use slots for passing HTML into components

Improving Pagespeed Performance with Vue 3 - Tom Dale

Tom Dale gets practical demonstrating how using WordPress as a headless CMS with a Vue.js frontend can move your site from a red to green Page Speed Insights score.

Key Takeaways

• Convert GIFs to Videos and reduce size by 75%
• serve images in next-gen formats (AVIF and WebP)
• use a modern Image CDN for intelligent formatting based on browser

Building Accessible Components - Homer Gaines

After a hardy lunch and an excellent round of lightning talks, Homer Gaines takes the stage to talk about Accessible Components. This talk was full of practical tips on making sure our Vue.js apps can be used by all kinds of people, no matter their physical and mental abilities.

Key Takeaways

• Accessibility is just as fragmented now as browsers were in past years
• When people get frustrated they go on twitter and tell everyone your app is trash
• start with semantic markup and use WAI-ARIA to fill in the gaps
• automated testing only finds 20% -57% of accessibility issues, don’t fail to do some manual testing
• empathy makes the world a little bit better

What's coming in Nuxt 3 - Dan Vega

Nuxt 3 is on the brink of a stable release and Dan shares his take on the good stuff in it.

Key takeaways

• Nuxi is the new Nuxt 3 CLI
• The Nuxt 3 minimal approach to boilerplate means less deleting default files
• Nuxt 3’s built-in composables provide comprehensive and flexible functionality
• Auto imports clean up component script sections
• Docs folder structure based navigation is easy to use
• API routes means Nuxt can easily be a full stack app solution

Component Testing with Vite, Vue, and Cypress - Jessica Sachs

Jessica Sachs takes live-coding head on and writes Cypress component tests for a Vue.js powered modal overlay.

Key takeaways

• it’s important to test components in the environment they’ll actually be viewed in (the browser)
• The speed of Vite carries over to component testing
• Component testing with Cypress can also power quick component playgrounds
• Chrome devtools work with component testing

Nuxt.js and Chrome - Kara Erickson

The second to last speaker of the day is Kara Erickson from the Aurora team at Google Chrome. Kara dives into ways to optimize site performance and how Nuxt.js simplifies the process.

Some Important Tips

• in 79% of desktop pages, LCP element is an image
• Use nuxt-image to make preloading images simpler. This solves waterfall issues.
• Use nuxt-picture if you’re not using a CDN to support modern image formats
• Be smart with preloading (don’t use it for everything)
• Use nuxt/google-fonts to automate preloading, pre-connects, and fonts hosted with project

From Vuex to Pinia - Adam Jahr

Adam Jahr rounds out the first day talking about one of the latest hot topics in the Vue community: Pinia. He starts by comparing Vuex to components and showing how Vuex works and then examines how Pinia simplifies global state management.

Key takeaways

• Pinia provides great devtools support even without the boilerplate of mutations
• TypeScript support in Pinia is top notch