Exclusive tips every week

Hey!

Merry Christmas Eve! I hope you're having a wonderful time today, whether you're celebrating with loved ones or enjoying some well-deserved downtime.

A few tips and articles to browse if you have some quiet time today.

— Michael

🔥 Improve reusability by converting template props into slots

One kind of prop, a template prop, can be directly converted into slots without very much work.

This makes your component more reusable.

The text prop here is a template prop, because it is only ever used in the template:

<template>
  <button @click="$emit('click')">
    {{ text }}
  </button>
</template>
<script setup>
const props = defineProps({
  text: {
    type: String,
    required: true,
  },
});
defineEmits(['click']);
</script>

It doesn't get used in any calculations or passed as a prop anywhere. Instead, it just gets directly interpolated and rendered to the page.

These props can be directly replaced with slots:

<template>
  <button @click="$emit('click')">
    <slot />
  </button>
</template>
<script setup>
defineEmits(['click']);
</script>

This sort of cleans up the code, but more importantly, it allows us to be more flexible with how the component can be used.

With a prop we have to use the component like this:

<Button text="Click me" @click="handleClick" />

But with a slot, we can add in whatever we want:

<Button @click="handleClick">
  Click on <strong>this</strong> button
</Button>

🔥 SSR Safe Directives

In many cases, we need to generate unique IDs for elements dynamically.

But we want this to be stable through SSR so we don't get any hydration errors.

And while we're at it, why don't we make it a directive so we can easily add it to any element we want?

Here's a stripped-down version of this directive:

const generateID = () => Math.floor(Math.random() * 1000);

const directive = {
  getSSRProps() {
    return { id: generateID() };
  },
}

When using it with Nuxt, we need to create a plugin so we can register the custom directive:

// ~/plugins/dynamic-id.ts
const generateID = () => Math.floor(Math.random() * 1000);

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.directive("id", {
    getSSRProps() {
      return { id: generateID() };
    },
  });
});

In Nuxt 3.10+, you can also use the useId composable instead:

<template>
  <div :id="id" />
</template>

<script setup>
const id = useId();
</script>

Normally, custom directives are ignored by Vue during SSR because they typically are there to manipulate the DOM. Since SSR only renders the initial DOM state, there's no need to run them, so they're skipped.

But there are some cases where we actually need the directives to be run on the server, such as with our dynamic ID directive.

That's where getSSRProps comes in.

It's a special function on our directives that is only called during SSR, and the object returned from it is applied directly to the element, with each property becoming a new attribute of the element:

getSSRProps(binding, vnode) {
  // ...

  return {
    attribute,
    anotherAttribute,
  };
}

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

📜 Nuxt Extends (video)

In this video from LearnVue, we see how powerful the extends feature is in Nuxt.

Check it out here: Nuxt Extends (video)

📜 Dynamically Updating my Landing Page with Nuxt Content

I recently spent some time updating the landing page for Clean Components Toolkit so that it will automatically update the outline as I update the course content itself.

In this article, I'll show you how it's done.

Check it out here: Dynamically Updating my Landing Page with Nuxt Content

💬 Carpentry vs. Software

"In carpentry you measure twice and cut once. In software development you never measure and make cuts until you run out of time." — Adam Morse

🧠 Spaced-repetition: Static and dynamic classes

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.

We can add static and dynamic classes to an element at the same time:

<ul>
  <li
    v-for="item in list"
    :key="item.id"
    class="always-here"
    :class="{ selected: item.selected }"
  >
    {{ item.name }}
  </li>
</ul>

This lets you apply basic styling through static classes and then dynamically add other styles as you need them.

You can also achieve the same thing when using an Object or Array with dynamic classes:

<ul>
  <li
    v-for="item in list"
    :key="item.id"
    :class="{
      'always-here': true,
      selected: item.selected,
    }"
  >
    {{ item.name }}
  </li>
</ul>

Or with an Array:

<ul>
  <li
    v-for="item in list"
    :key="item.id"
    :class="[
      'always-here',
      item.selected && 'selected',
    ]"
  >
    {{ item.name }}
  </li>
</ul>

I prefer splitting them out into class and :class bindings though, since it makes the code clearer. It also makes it less likely to be broken when refactored!

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