Exclusive tips every week

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

🔥 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.