Hey! I have the landing page for Nuxt Tips Collection set up now. If you want to make sure you don't miss any updates about it, go there to sign up. Soon, the first episode of DejaVue with Evan You comes out, so make sure you don't miss it. I'll also be continuing work on Vuedle in my weekly live-stream — changing the answer based on the day, deploying to my shiny new domain, vuedle.app, and more. 🔥 When should you use v-if? Instead of using v-if, it's sometimes more performant to use v-show instead: <ComplicatedChart v-show="chartEnabled" />
When v-if is toggled on and off, it will create and destroy the element completely. Instead, v-show will create the element and leave it there, hiding it by setting its style to display: none. Doing this can be much more efficient if the component you're toggling is expensive to render. On the flip side, if you don't need that expensive component immediately, use v-if so that it will skip rendering it and load the page just a bit faster. 🔥 A better way to handle errors (and warnings) You can provide a custom handler for errors and warnings in Vue: // Vue 3 const app = createApp(App); app.config.errorHandler = (err) => { alert(err); }; // Vue 2 Vue.config.errorHandler = (err) => { alert(err); };
Bug tracking services like Bugsnag and Rollbar hook into these handlers to log errors, but you can also use them to handle errors more gracefully for a better UX. For example, instead of the application crashing if an error is unhandled, you can show a full-page error screen and get the user to refresh or try something else. The warning handler in both versions only works in development. I created a demo showing how this works. It uses Vue 3, but as seen above, it works nearly the same in Vue 2: Error Handler Demo 🔥 Component Metadata Not every bit of info you add to a component is state. For example, sometimes, you need to add metadata that gives other components more information. For example, if you're building a bunch of different widgets for an analytics dashboard like Google Analytics or Stripe. If you want the layout to know how many columns each widget should take up, you can add that directly on the component as metadata: <script setup> defineOptions({ columns: 3, }); </script>
Or if you're using the Options API: export default { name: 'LiveUsersWidget', // Just add it as an extra property columns: 3, props: { // ... }, data() { return { //... }; }, };
You'll find this metadata as a property on the component: import LiveUsersWidget from './LiveUsersWidget.vue'; const { columns } = LiveUsersWidget;
With the Composition API we can't access this value directly, because there's no concept of a "current instance". Instead, we can make our value a constant: <script setup> const columns = 3; defineOptions({ columns, }); </script>
But this value cannot change, because defineOptions is a compiler macro and the value is used at compile time. If you're using the Options API you can access the metadata from within the component through the special $options property: export default { name: 'LiveUsersWidget', columns: 3, created() { // `$options` contains all the metadata for a component console.log(`Using ${this.$options.columns} columns`); }, };
Just keep in mind that this metadata is the same for each component instance and is not reactive. Other uses for this include (but are not limited to): - Keeping version numbers for individual components
- Custom flags for build tools to treat components differently
- Adding custom features to components beyond computed props, data, watchers, etc.
- and many more I can't think of!
I used this technique to build my Totally Unnecessary If/Else Component if you want to see it in action. 🎙️ #014 — VueUse and our Favorite Composables VueUse might be a library known to many Vue and Nuxt developers - and if not, it should be quickly! With over 200 functions, composables and utilities, it provides a "standard composable kit" which Alex and Michael take a look at in this DejaVue episode. And more than that, they also share their favorite composables that they use or learnt a lot from. Definitely do not miss that out and stay for the spoilers at the end. Watch on YouTube or listen on your favourite podcast platform. Chapters: In case you missed them: 📜 Mark Raw Optimization Let's keep the VueUse theme going! This article takes a deeper look at VueUse's useManualRefHistory, and how we can optimize our non-reactive state when it gets large. Check it out here: Mark Raw Optimization 📜 Make Your First Plugin with Vue JS for Photoshop and Adobe XD Last week I shared an article on creating a VS Code extension. Now we break out of the web world entirely, and see how we can create a plugin for Photoshop. It's an older article, but still great and relevant today. Check it out here: Make Your First Plugin with Vue JS for Photoshop and Adobe XD 📅 Upcoming Events Here are some upcoming events you might be interested in. Let me know if I've missed any! VueConf CN 2024 — (July 6, 2024) Check it out here PragVue 2024 — (September 17, 2024) The first Czech Vue.js conference, taking place in Cinema City - Nový Smíchov Check it out here Vuejs.de Conf — (October 8, 2024 to October 9, 2024) A community-driven Vue conference in Germany. Listen to great talks from great speakers and meet the wonderful VueJS Community. Check it out here Vue Fes Japan 2024 — (October 19, 2024) Check it out here VueConf Toronto 2024 — (November 18, 2024 to November 20, 2024) My favourite Vue conference, in my own backyard! A three-day event with workshops, speakers from around the world, and socializing. Check it out here 💬 It always takes longer "It always takes longer than you expect, even when you take into account Hofstadter's Law." — Hofstadter's Law 🧠 Spaced-repetition: Computed Props in Your Template: v-memo 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. 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. 🔗 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 four products/courses: Clean Components Toolkit, Vue Tips Collection 2, Mastering Nuxt 3, and Reusable Components |
评论
发表评论