Read this on my blog Hey all! I've started working on the next course for Mastering Nuxt. It's going to be a collection of short lessons exploring the hidden gems in Nuxt. Very similar in spirit to the Nuxt Tips Collection book, but a full video course with exercises you can do. The goal is to teach you Nuxt tricks that you probably don't know about, and are also super practical and helpful in your day to day work. If you have specific things you'd like to see in it, just reply and let me know! I read all the responses I get. Otherwise, enjoy your tips, and enjoy your week! — Michael Vue Tips Collection Level up your Vue skills with bite-sized, actionable tips delivered daily: - 118 carefully crafted tips covering both Vue 2 and Vue 3
- Complete coverage of both APIs with examples in Options API and Composition API
- Daily email delivery of 3 tips for 3 months
- Beautiful hardcover book professionally printed in Canada
- Instant digital access so you can start learning right away
"Michael explains complex topics in a way that's straightforward for all levels of Vue.js developers." — Ximo Belda Master Vue in 5 Minutes a Day → 🔥 Nuxt Layout Fallback If you're dealing with a complex web app in Nuxt, you may want to change what the default layout is: <NuxtLayout fallback="differentDefault"> <NuxtPage /> </NuxtLayout>
Normally, the NuxtLayout component will use the default layout if no other layout is specified — either through definePageMeta, setPageLayout, or directly on the NuxtLayout component itself. This is great for large apps where you can provide a different default layout for each part of your app. 🔥 Reusability Fundamentals: The Configuration Pattern So you've got a fantastic CodeBlock component that does syntax highlighting and even shows line numbers: <CodeBlock language="js"> const myMessage = 'Highlighting code is supa ez'; </CodeBlock>
But now, you need to support a second colour theme. Instead of copy and pasting (which is sometimes the right solution!), we can use props to help us create variations: <!-- Uhhh, maybe not the best solution --> <DarkModeCodeBlock language="js"> const myMessage = 'Highlighting code is supa ez'; </DarkModeCodeBlock>
<!-- This is what props were meant for --> <CodeBlock language="js" theme="darkMode" > const myMessage = 'Highlighting code is supa ez'; </CodeBlock>
You already do this intuitively, so this may not be a huge revelation. But the Configuration pattern is a fundamental pattern — you can't ignore it if you want to master reusability. Dealing with prop explosions and understanding the Base Component Pattern is also part of mastering Configuration, the second level of reusability. And the other, more exciting levels of reusability? Well, mastering Configuration is vital to unlocking them. All the other levels build on top of this one. 🔥 A simpler way to pass lots of props Instead of passing in tons of props to a component individually: <template> <User :name="user.name" :profile="user.profile" :twitter="user.twitter" :location="user.location" :framework="user.framework === 'Vue' ? 'Number one' : 'Number two'" /> </template>
You can take a whole object and have all of its properties automatically bound to the component as props: <template> <User v-bind="user"/> </template> <script setup> import User from './User.vue'; const user = { name: 'Anakin', profile: 'ani-profile.jpg', twitter: '@TatooineJedi', location: 'Undisclosed', framework: 'Vue', }; </script>
This also works with v-on if you have a lot of event handlers: <template> <User v-on="userEventHandlers"/> </template> <script setup> import User from './User.vue'; const userEventHandlers = { updateName(newName) { // ... }, deleteUser() { // ... }, addFriend(friend) { // ... } }; </script>
Here, the name of each method needs to match the name of the event. eg. updateName is called to handle the update-name event. 📜 Automatically Generate AI Chat Titles with Animation in Nuxt Learn how to automatically generate AI chat titles with animation in Nuxt. Check it out here: Automatically Generate AI Chat Titles with Animation in Nuxt 📜 How NuxtErrorBoundary Works Learn how the NuxtErrorBoundary component works, and how you can use it to handle errors in your Nuxt apps. Check it out here: How NuxtErrorBoundary Works 📅 Upcoming Events Here are some upcoming events you might be interested in. Let me know if I've missed any! 💬 Principles of Programmer Productivity "What one programmer can do in one month, two programmers can do in two months." — Fred Brooks 🧠 Spaced-repetition: Overriding styles of a child component — the right way 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. Scoped CSS is fantastic for keeping things tidy and not accidentally bleeding styles into other parts of your app. But sometimes, you need to override the styles of a child component and break out of that scope. Vue has a :deep selector just for this: <style scoped> /* Override CSS of a child component while keeping styles scoped */ .my-component :deep(.child-component) { font-size: 24px; } </style>
In Vue 2 this has a slightly different syntax depending on which CSS pre-processor you're using: <style scoped> /* When using SASS */ .my-component ::v-deep .child-component { font-size: 24px; } /* Everything else */ .my-component >>> .child-component { font-size: 24px; } </style>
Yes, I have previously covered why you shouldn't do this, but overriding styles can be the best solution (we don't believe in "best practices" here). 🔗 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: | 
评论
发表评论