Exclusive tips every week

Hey there!

Black Friday is around the corner, and I will be offering a massive 35% discount on all of the courses I sell on michaelnthiessen.com.

Just use the code BLACKFRIDAY25 at checkout to get the discount.

The discount will be available from November 24 to November 28.

Here's a quick overview of what you can pick up:

• Clean Components Toolkit (most popular)
• Advanced Reactivity (new)
• Composable Design Patterns
• Nuxt Tips Collection
• Vue Tips Collection 2

Of course, you can also just enjoy the newsletter!

— Michael

🔥 Static and dynamic classes

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!

🔥 Performance Tracing

Vue allows you to do performance tracing to help you debug any performance issues:

const app = createApp({});
app.config.performance = true;

Once you do this, you can use the official Vue Devtools to debug your app's performance.

🔥 Calling a Method from Outside of the Component

You can call a method from outside of a component by giving it a ref:

<!-- Parent.vue -->
<template>
  <ChildComponent ref="child" />
</template>
<script setup>
const child = ref(null);

// Somewhere in the Parent component
child.value.method();
</script>

If you're using the Options API, your syntax is only slightly different:

<!-- Parent.vue -->
<template>
  <ChildComponent ref="child" />
</template>
<script>
export default {
  methods: {
    myMethod() {
      // This can be anywhere in the Parent component
      this.$refs.child.method();
    }
  }
}
</script>

Let me explain this one a bit more.

Sometimes "best practices" don't work for what you're doing, and you need an escape hatch like this.

Typically, we communicate between components using props and events. Props are sent down into child components, and events are emitted back up to parent components.

<template>
  <ChildComponent
    :tell-me-what-to-do="someInstructions"
    @something-happened="hereIWillHelpYouWithThat"
  />
</template>

Occasionally, you may need your parent to trigger a method in the child component. This is where only passing props down doesn't work as well.

You could pass a boolean down and have the child component watch it:

<!-- Parent.vue -->
<template>
  <ChildComponent :trigger="shouldCallMethod" />
</template>
<script setup>
// Child.vue
import { watch } from 'vue';

const props = defineProps({
  trigger: {
    type: Boolean,
    required: true
  }
});

watch(props.trigger, (newVal) => {
  if (newVal) {
    // Call the method when the trigger is set to `true`
    someMethodInChild();
  }
});
</script>

This works fine, but only on the first call. If you needed to trigger this multiple times, you'd have to clean up and reset the state. The logic would then look like this:

1. The Parent component passes true to trigger prop
2. Watch is triggered, and the Child component calls the method
3. The Child component emits an event to tell the Parent component that the method has been triggered successfully
4. The Parent component resets trigger back to false, so we can do this all over again

Ugh.

Instead, if we set a ref on the child component we can call that method directly:

<!-- Parent.vue -->
<template>
  <ChildComponent ref="child" />
</template>
<script setup>
const child = ref(null);

// Somewhere in the Parent component
child.value.method();
</script>

Yes, we're breaking the "props down, events up" rule and breaking encapsulation, but it's so much cleaner and easier to understand that it's worth it!

Sometimes the "best" solution ends up being the worst solution.

📜 The Vite Ecosystem

Vite has taken web development tooling to a new level.

This article explores all of the different tools Vite uses and interacts with, and shows just how much it affects the web development community.

It's very cool to see a project that started out in Vue-land gain wide adoption like this!

Check it out here: The Vite Ecosystem

📜 Make Your Components Easier to Think About

I hate thinking.

Well, actually, I love thinking, but only when I’m able to solve problems or make progress with it.

But often our code gets in the way of this. And as one workshop attendee said about reading code, “if you’re confused, it’s not your fault.”

This article goes over some ways you can make your code easier to think about, so you’re less confused and can actually get stuff done.

Check it out here: Make Your Components Easier to Think About

💬 The Code You Don't Write

"The code you write makes you a programmer. The code you delete makes you a good one. The code you don't have to write makes you a great one." — Mario Fusco

🧠 Spaced-repetition: Dynamic Slot Names

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 dynamically generate slots at runtime, giving us even more flexibility in how we write our components:

<!-- Child.vue -->
<template>
  <div v-for="step in steps" :key="step.id">
    <slot :name="step.name" />
  </div>
</template>

Each of these slots works like any other named slot. This is how we would provide content to them:

<!-- Parent.vue -->
<template>
  <Child :steps="steps">
    <!-- Use a v-for on the template to provide content
         to every single slot -->
    <template v-for="step in steps" v-slot:[step.name]>
      <!-- Slot content in here -->
    </template>
  </Child>
</template>

We pass all of our steps to the Child component so it can generate the slots. Then we use a dynamic directive argument v-slot:[step.name] inside a v-for to provide all of the slot content.

When might you need something like this?

I can imagine one use case for a complex form generated dynamically. Or a wizard with multiple steps, where each step is a unique component.

I'm sure there are more!

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