Read this on my blog We have a date! The next version of Mastering Nuxt is coming out on March 25th! We're all working hard to get it done and make it as amazing as possible. In fact, just a couple days ago I had a great call with Sebastien Chopin (one of the creators of Nuxt) and we worked on ironing out some parts of the content. Alex and I also had the chance to chat with Aaron Francis from Try Hard Studios about his new library, Fusion. It's a podcast episode you won't want to miss! And of course, we've got all the tips. — Michael 🔥 Computed Props in Your Template: v-memo Vue 3.2+ gives you fine-grained control over template re-rendering using v-memo: <div v-memo="[varA, varB, varC]"> <!-- ... --> </div>
This works much the same as a computed prop does. An element with v-memo is only re-rendered when the array changes, but otherwise, it caches (or memoizes) the result. When it's used with v-for you can selectively re-render only the parts of a list that have changed: <div v-for="item in list" :key="item.id" v-memo="[item.id === selected]" > <!-- ... --> </div>
Here, we only update the nodes that go from selected to unselected or vice versa. Much faster if you're dealing with extremely long lists! But since Vue is already so efficient with re-renders, you shouldn't need to use v-memo often. It's definitely a helpful tool to help you get more performance — when you really need it. Check out the docs for v-memo. 🔥 Nuxt Content Queries Nuxt Content gives us an effortless way to query our content using the queryContent method: queryContent('articles') .where({ // Optional fields that may be true or non-existent ghost: { $ne: true }, newsletter: { $ne: true }, // Don't render articles scheduled for the future date: { $lte: new Date() }, }) .only(['title', 'path', 'description', 'date', 'tags']) .sort({ date: -1 }) .find();
Here, I've created a composable called useArticles for my blog, which grabs all of the content inside of the content/articles/ directory. The queryContent composable is a query builder, which gives us a lot of expressiveness in what data we fetch. Let's see how we're using this here. First, we're using a where clause to filter out all the articles we don't want. Sometimes I will add an article before I want it to be "published" to the site. I do this by setting the date in the future and then only taking articles before "today" using this clause: date: { $lte: new Date() }
Second, some articles are the newsletters I write each week. Others are pieces of content that I want to keep in the articles folder but don't want to be published. I use frontmatter fields to specify this: --- newsletter: true # This is a newsletter ---
--- ghost: true # This content won't appear on the site ---
Third, we use the only clause to grab just the fields we need. By default, the queryContent method returns a lot of data, including the entire piece of content itself, so this can make a big difference in payload size. Lastly, as you have probably guessed, we have a sort clause to sort the articles so the most recent ones appear last. The queryContent composable has more options than this, which you can read about on the docs. 🔥 Mixing local and global styles together Normally, when working with styles we want them to be scoped to a single component: <style scoped> .component { background: green; } </style>
In a pinch though, you can also add a non-scoped style block to add in global styles if you need it: <style> /* Applied globally */ .component p { margin-bottom: 16px; } </style> <style scoped> /* Scoped to this specific component */ .component { background: green; } </style>
Be careful, though — global styles are dangerous and hard to track down. Sometimes, though, they're the perfect escape hatch and precisely what you need. 🎙️ #049 — The Fusion of Laravel and Vue (with Aaron Francis) In this episode, Michael and Alex are joined by Aaron Francis, software developer, content creator, and co-founder of Try Hard Studios. Besides covering Aaron's journey into programming, they dive into Fusion, a new library that Aaron has been working on which will fuse your Laravel backend together with your Vue frontend, allowing you to write PHP and Vue in the same file. The three developers dive deep into the technical details of Fusion, how it works under the hood, and also how the community reactions have been so far. Watch on YouTube or listen on your favorite podcast platform. In case you missed them: - #048 — AI and Vue.js (with Daniel Kelly and Patrick van Everdingen)
- #047 — A Vue at Alexander Lichter
- #046 — A Vue at Michael Thiessen
📜 24 Time-Saving Tips for Nuxt We know that Nuxt is a fantastic tool. But it has so many amazing features that it's hard to keep track of them all. That's why I've compiled this giant list of 24 Nuxt tips for you — use them to save time and write better Nuxt apps. We cover a lot of topics here, including: - When to use /assets vs. /public directory
- Using runtimeConfig vs. app.config
- Understanding how Universal rendering works (and how it's different from SPA and SSR)
- A utility to make your own NuxtLink components that no one is talking about
- Adding a basic cache to your data fetching — since Nuxt doesn't do this by default
Of course, there is so much more! Check it out here: 24 Time-Saving Tips for Nuxt 📜 Optimizing a Vue App Michelle does an excellent job of giving a high-level overview of best practices to keep your app speedy. Great as a starting off point or checklist for anyone looking to optimize their Vue app. Check it out here: Optimizing a Vue App 📅 Upcoming Events Here are some upcoming events you might be interested in. Let me know if I've missed any! Vuejs Amsterdam 2025 — (March 12, 2025 to March 13, 2025) The biggest Vue conference in the world! A two-day event with workshops, speakers from around the world, and socializing. Check it out here VueConf US 2025 — (May 13, 2025 to May 15, 2025) Giving a talk here on component patterns! A great Vue conference, this year held in Tampa. Two days of conference talks, plus a day for workshops. Check it out here MadVue 2025 — (May 29, 2025) It's time to get together in Madrid. Join for a full day of talks, activities, and networking with the Vue.js community and ecosystem. Check it out here 💬 Hardly Ever Happens ""That hardly ever happens" is another way of saying "it happens"." — Douglas Crockford 🧠 Spaced-repetition: Watching Nested Values The best way to commit something to long-term memory is to periodically review it, gradually increasing the time between reviews 👨🔬 Actually remembering these tips is much more useful than just a quick distraction, so here's a tip from a couple weeks ago to jog your memory. You may not have known this, but you can easily watch nested values directly when using the Options API, just by using quotes: watch: { '$route.query.id'() { // ... } }
This is really useful for working with deeply nested objects! We can also watch nested values using the Composition API: watch( () => value.that.is.really.nested, () => { // ... } );
🔗 Want more Vue and Nuxt links? Michael Hoffman curates a fantastic weekly newsletter with the best Vue and Nuxt links. Sign up for it here. p.s. I also have a bunch of products/courses: | 
评论
发表评论