It's been a tough last week — my whole family has COVID, so I'm running on low energy mode. Still, I've managed to put together this issue, which includes a really useful Nuxt tip on naming file chunks. This can help you analyze large chunks in your production bundles. Hope you find it helpful!
👉🏻 When using `nuxi init` to scaffold a new Nuxt application and choose NPM as package manager, you might've seen deprecation warnings.
👉🏻 Alex explains if they are relevant and what they do say.
💡 Nuxt Tip: Add Filenames to Your Nuxt Chunks
In one of my customer's projects, we had a problem with one Nuxt client chunk that was too large (>1MB).
We used the nuxt analyze CLI command to analyze the production bundle and identify which chunk was too large.
The command generates a URL that you can open in your browser to see a visual representation of your bundle:
Unfortunatly, the chunk names are not very descriptive because they are hashed. To make them more descriptive, you can add the following code to your nuxt.config.tsnuxt.config.ts file:
👉🏻 Focus on unit tests with the right scope, avoid unnecessary component tests, and leverage stable APIs to create scalable integration tests that require minimal maintenance.
👉🏻 Having good tests helps maximize engineering velocity, and automated generated tests may help codebases be better tested in the future.
If you're using Vue 3, you're probably using composables. But other than using VueUse where you can, how do you get the most out of them? Over the past few years I've been slowly putting together a list of patterns and best practices for how to write composables in the best way. I've spent hours reading the source code of VueUse (one of the best — but most time-consuming — ways to learn it). I've read articles, listened to talks, and written lots and lots of my own code. I ended up with 15 different patterns, and each one will help you to write better composables. I've condensed and put all of these composables together into a course — Composable Design Patterns. Get Composable Design Patterns now. Because this is the launch, it's on sale for 35% off until Thursday. For each of the 15 patterns in this course, you'll get: A concise overview that tells you when and how to use it, along with variations and edge cases ...
Weekly Vue News #194 Reactive Time Ago View online Hi 👋 I'm on vacation this week, so no special news from my side — just some fresh Vue & Nuxt content for you! Enjoy this issue and have a lovely week ☀️ Vue 📕 Optimizing heavy operations in Vue with Web Worke...
Hey! In yesterday's email I shared what I think is the key feature to making Vue components highly reusable: Scoped slots. But scoped slots are hard to grasp, and even more difficult to master. So today, we're going to make sure we understand them on a deep, intuitive level. Then, I'm going to introduce you to the magic ✨ of scoped slots. The trick is to think of them as functions. Slots are just functions We're going to recreate the functionality of slots, but we'll use a regular Javascript function that only returns HTML. This is the code we'll replicate: <!-- Parent --> < template > < div class = "modal-container" > < div class = "modal" > Content in the Parent < Child class = "mb-4" v-slot = "{ text }" > ...
评论
发表评论