Can you believe it’s already been a month since our last This Month in Vue podcast? A lot has happened this month. Adam, Ben and I are excited to fill you in on what’s been happening in our Vue community this November.
Why Nuxt.js is the perfect framework for building static websites
If you’ve ever been asked to build a highly interactive, animation heavy website with good performance, then you know how many choices can go into this type of project. Our friend Krutie Patel recently wrote up a case study of this process and why she chose Nuxt.js.
This article exemplifies the architectural choices and how certain pieces can fit together when building static websites. Krutie also walks us through the benefits of using Nuxt for the example application and the specific Nuxt modules that she used.
This is a great read if you are looking for something a little different than a tutorial with contrived examples and want to follow a real-world example.
A domain-driven Vue.js Architecture
If you develop an app as a part of a team, then you know how crucial it is for everyone to be on the same page about pretty much every part of the process. But especially about how the app should be developed from an architectural perspective.
Thomas Holland shared how his team has approached building their app using a domain-driven architecture in a recent article. This is a fancy word that talks about the categorical sections (domains) of the app, or different feature-related territories (i.e. Homepage, Profile, Settings, etc.). Thomas shares how this works in practice and how it’s helped achieve a mutual understanding within his team, with everyone on board with the moving pieces of their project.
An Early Look at the Vue 3 Composition API
As I’m sure you know, there’s a lot swirling around out there about the Vue 3 Composition API. And with that said, there’s a lot of examples that illustrate the benefits of it. However, this article by Mateusz Rybczonek really stood out to us because he writes about using the Composition API in a real project. All while using the Vue 2 plugin.
He walks through how the Composition API helps break his app’s complexity up into individual functions, making his application much easier to understand and follow. You can really see the benefits of the new Vue 3 feature in action through this read.
If you haven’t yet gotten to explore what’s to come and how to use Vue 3, I have an essentials course that you can check out here which will kick-start your understanding of the new Composition API.
Production-ready Vue SSR in 5 Simple Steps
While setting up server-side rendering using webpack with Vue on your own is a confusing process, there are ways to make that simpler on yourself. Nuxt comes with all you need for server side rendering setup for you, however sometimes you may want to set it up on your own (i.e. if you need a simpler setup or more control than what Nuxt gives you).
Luckily, Oleg Pisklov walks us through how to get production-ready Vue with server side rendering in 5 simple steps in one of his recent articles. Check it out if you want to roll your own server side rendering.
Top ways to learn Vue 3
You’ve been hearing a lot about Vue 3 from us… and the rest of the Vue community. We figured with all the information floating around, it would be helpful if we gathered the best Vue 3 articles, tutorials, videos, and podcasts into one resource. So this week we published that list as a blog post called the Top ways to learn Vue 3. This blog post is a comprehensive guide that points to the best learning resources and provides a summary of what to expect from them.
If you want to listen to more Vue 3-related podcasts, read through some tutorials, or check out the official Vue.js roadmap, this guide has you covered.
The Most Important Feature in Vue
What’s the most important feature in Vue? While answers may vary depending on whom you ask, but Michael Thiessen would say it’s computed properties because they help us write code declaratively. As a result, we get code that is more concise while also being easier to understand. Michael provides a full explanation (plus some awesome analogies!) for his reasoning why computed properties are such an important feature in his article.
Setting up Tailwind CSS with Vue.js
If you’ve caught wind that Tailwind CSS is taking the world by storm, then you might know it calls itself the “utility-first” framework. This just means that it gives you the building blocks to create custom designs without having to override opinionated styles. But because it provides so many utility classes, it’s file size is quite large. Markus Oberlehner’s tutorial walks through setting up Tailwind in a Vue app while using PurgeCSS to greatly reduce the bundle size. If you have been wanting to dive into Tailwind, I recommend reading this full explanation.
Suspense - A New Feature in Vue 3
I can hardly wait for Vue 3. And the more I learn about the new features, the more I wait in suspense. It seems pretty fitting that there is a new feature actually called Suspense.
What is it for? When waiting for data to come back from asynchronous operations such as API calls, rather than displaying a blank screen to users, we often need to come up with our own solutions for scaffolding some sort of loading state while waiting for the data to come back.
The Suspense component will allow us to provide fallback content to the user so that they can see something else while waiting for the data. And then when the data arrives successfully, it will handle the switch to the new component. For some code examples, be sure to check out Filip Rakowski’s article.
VueConf & Vue Amsterdam
The full program for VueConf US has been posted and to say I’m excited based on the list of talks is an understatement. Adam and I will be there in Austin, Texas, in March with the Vue Mastery team, and we would love to see you there. You can grab a ticket by using the coupon code VUEMASTERY50 to get $50 off a ticket.
If you’re not in North America and traveling to the US is a stretch, then you might want to consider Vue Amsterdam in February. It’s one of the biggest Vue conferences in Europe, the speaker lineup has been posted, and tickets are already available.