After an amazing 2 days, it’s safe to say that Vue.js Nation was an amazing success! Over 8,000 people from all over the world tuned in to get the latest community news and expertise from the Vue.js and Nuxt core teams and community members alike.
Session topics ranged from new docs, to revamped educational resources and hiring from Vue School, to practical advice for testing, performance, and application development.
In this article, let’s take a few moments to go through the highlights of each talk and if you’d like to see full recordings of each day, those are also available for free!
Let’s begin by recapping all the talks from day 1.
Evan You, the creator of Vue.js, kicked off the conference showing off the newly developed official documentation. The new documentation is filled with ~70% new content, and Evan suggests reading it through after the official release on February 7.
If you want to get a glimpse into it’s current state you can checkout the staging site at https://staging.vuejs.org/.
Some notable features include:
An API preference toggle (Options or Composition API) to reference all pages in the guide according to your preference
A page dedicated to Composables
A dark mode option! (I’m a sucker for a good dark mode)
A single file component playground (complete with support for script setup)
and an awesome and comprehensive examples section
Plus it’s built on VitePress with a 100 performance score on desktop and mobile!
No doubt we’ll all be making good use of this brand new documentation soon!
While Alex’s machine had a near death experience at just the wrong time, Natalia subbed in for his time slot. However, in the schedule, Alex was next so let’s recap what he had to say about Vue School.
Alex began with the inspiring story of how Vue School started early in the life of Vue.js. At the time, his colleagues thought he was crazy to invest in such an infant technology but 7 years later the payoff is clear. Vue.js is a major player in the front end framework game and Vue School is an often used platform that’s educated 1000’s of developers in the community.
Alex ended his talk with 2 BIG announcements about the future of Vue School and it’s offerings to the community.
The first big news that Alex shared is that Vue School has opened early access to a Hiring Program to help companies search for and find Vue.js developers based on specific experience/skills filters. Developers can start creating their profiles today and companies can register for early access.
Secondly, Alex announces a big new release for the Vue School website. Vue School 3.0 is built on Nuxt, Tailwind, and a Laravel powered API. This all comes together to make iterations on new features quicker, as well as a site that is lightning fast!
Natalia spent her talk, sharing 7 tips for unit testing your Vue.js components. The biggest take away for me was her tip on sticking to testing your component’s output (ie. the template, events, etc) and limit testing of component internals. Other tips include:
To make interacting with Stripe even easier he shares the open source package Vue Stripe, an official stripe partner.
You can find slides for Charles’ presentation here.
The highlight of day 1’s lightning talks was the introduction of Vitest by Anthony Foo. Though short, it was great to hear from one of the creators of the much anticipated Vitest unit test runner! Features include configure-less setup with Vite and a Jest compatible API.
Also, delivering lightning talks were Dominic Blain and Łukasz Holeczek.
Though Dominic likes Pineapple on his pizza, he does share some really smart, modern approaches the Snipcart team took when building their website. Their CMS of choice, Dato had some great features such as supporting multiple environments and the user experience of the CMS was also a big factor. They also went with Netlify for hosting and Nuxt for their Vue.js framework for a performant site.
Łukasz did some live coding showing off some of the features of Core UI.
Pooya was the first Nuxt.js core team member to speak during the conference. He spoke on the server abstraction library Nitro. The primary goal behind it is to provide a server that works everywhere (node, cloudflare workers, web workers, deno, etc). The result is Nuxt being deployable almost anywhere!
Different from the Nitro server itself which is specific to Nuxt, the Nuxt team is working on a seperate package NitroPack that includes all the features of Nitro but decoupled from Nuxt. After a number of refactoring iterations the package is almost ready for release.
The next talk was given by Alex Jover Morales and he dove into what makes for a great developer experience. After reminiscing a bit about the “good old days” of JQuery and Backbone, he surveyed the current landscape of tools with little to no configuration required. Some of the key qualities of tools with a good developer experience include:
As an example of a tool with great developer experience, Alex showed the popular headless CMS Storyblok and the updates they’ve made to the newest version of the
@storyblok/vue package to make it simpler and more streamlined.
He rounded out the talk, by walking through a quick Vue.js application using Storyblok and how they work together.
The next to the last talk was given by Austin Gil and was honestly one of my favorite of the day. He included some fun bits about his dog “Nugget” as well as approached accessibility from more of an ethics point of view than a business strategy. My favorite quote during the talk was: “I feel pretty crappy if people can't use the things I've built”.
Among other things, he talks about meeting designers and developers where they are by providing accessibility tools that integrate directly into the software they’re using everyday. For example, using accessibility tools in Figma and VS code.
Other tips include:
Luke Diebold ended the day with an energetic bang, doing some live coding and scaffolded an app with full authentication in under 3 minutes using Quasar and Supabase!
With the rest of his 20 minutes, he showed off using Vuex-orm with Quasar to quickly build a real, working Todo application.
Now let’s go through a recap of day 2.
I had the privilege of kicking off day 2 of the conference with a presentation on Vite, what it is, and how to move your Vue CLI powered projects to it. Among other things, takeaways include:
Slides from the presentation can be found here.
Maya picked up the second talk of the day talking about XState and how you can utilize it to better understand your application’s state. The emphasized soft skill of the talk was really learning how to slow down and read code before just jumping in and coding away.
One of the best ways we can read code is to visualize it and that’s where XState and state machines comes in.
She ends the talk by live coding a cart wizard using Vue 3, Pinia, and XState and sharing the flow chart that’s automatically generated by XState (pictured above).
Amir Rustamzadeh from Cypress gave the next talk focused on testing components with the up and coming Cypress version 10. The Component’s test runner brings the same great API to component testing that we’re used to using in their E2E testing tools. Key takeaways include:
Next Abdelrahman Awad talks about composing forms with his Vue 3 compatible library VeeValidate. He begins by discussing some common issues with composing forms using higher order components and then goes on to show how using the composition API helps solve some of these problems.
His vision for the Composition API and VeeValidate is easy creation of custom field components.
Justin Metros gave an amazing talk sharing some of the lessons he learned migrating Universal Standard to a headless Shopify storefront with Nuxt.js, running on Layer0. Motivation for doing so included:
Some lessons learned along the way include:
There were a wealth of very practical tips during this talk and I definitely recommend checking it out. Finally, Justin provides a boilerplate called Nuxt-Shop to get started with Nuxt and Shopify.
Next up, was Nuxt core team member Daniel Roe. Among the highlights of his live coding session of a wordle clone “n3rdle” 😆 were:
<NuxtPage/>component for rendering the current page in App.vue
During the live Panel for day 2 Nuxt core team members Daniel Roe and Pooya Parsa took the time to answer all of our burning questions about Nuxt 2 and Nuxt 3. There were a great number of questions asked during the panel but some of the most useful information shared in my opinion include:
After the live panel, Abhijeet Prasad from Sentry.io gave an excellent talk on getting a handle of web performance for Vue.js. First, he points out that when talking about web site performance we must realize first that performance is all about people and how they perceive interacting with the site. This is an important starting point, after which we must collect data to inform the actions taken to improve performance. Some places to start measuring include:
Finally, Sentry.io can help not only with error monitoring but also provides a number of different tools for performance monitoring as well. To learn more, you can watch the FREE course on Vue School: Application Monitoring with Sentry.
The second to last talk of the conference came from Eduardo San Martin Morote on the new state management library Pinia. He started out by answering the question “Do you need a store?” Answers to that question include:
Throughout the rest of the talk he demonstrated how to use Pinia, the wonderful typing provided, and how to easily create a local storage plugin.
To wrap up the conference Filip Rakowski shared some amazing insights into successfully running an open source project like Vue Storefront. He answered some of the common questions people have when attempting to get into the open source space such as:
In conclusion, I’d like to give a big shout out to all those involved in Vue.js Nation whether organizers, speakers, sponsors, attendees, or anyone else! Thank you all for making it a great conference!