🔥 Vue Tips #29: Component Seams Framework: The easy way to split up components

This newsletter was sent out to my list on October 6, 2021. Sign up here to get emails like this each week!

Heyo,

Do you like hot sauce?

Well, I tried making some last week, and it was an utter failure. So I'll stick with baking bread.

And if you don't like hot sauce, maybe you'll enjoy these hot tips instead.

— Michael

🔥 v-pre and v-once

If you've got large chunks of static or mostly static content, you can tell Vue to ignore it using the v-pre or v-once directives:

<template>
  <!-- These elements never change -->
  <div v-pre>
    <h1 class="text-center">Bananas for sale 🍌</h1>
    <p>
      Come get this wonderful fruit!
    </p>
    <p>
      Our bananas are always the same price — $1 each!
    </p>

    <div class="rounded p-4 bg-yellow-200 text-black">
      <h2>
        Number of bananas in stock: as many as you need
      </h2>
      <p>
        That's right, we never run out of bananas!
      </p>
    </div>

    <p>
      Some people might say that we're... bananas about bananas!
    </p>
  </div>
</template>

These can be useful performance optimizations if you need them.

With v-pre Vue will treat the element and it's children as static HTML, and won't do any of it's magic on it. The v-once directive tells Vue to evaluate it once, and then never update it again.

Here are the docs for v-pre and v-once.

🔥 Component Seams Framework: The easy way to split up components

Here's a technique for splitting up components:

The code you write forms natural groups. You want to identify these groups, and the seams that run between them.

Once you do that, it's easy to extract components — by keeping things in their natural groups as much as possible.

The Component Seams Framework helps you do that in just three steps:

1. Find the seams — they can be found in your template, by looking for repeated sections, as well as sections that perform different tasks. You can also find them in your props, state, and computed props, by looking for things that are related and are often updated together.
2. Stack the seams — take all of the seams you've found, line them up, and you'll start to see where they agree (and where they don't).
3. Split along the seams — piece by piece, we'll pull things out and then figure out what to do with its dependencies. Either include the dependency in the new component or pass it in to the new component somehow (prop, slot, or event).

This method is covered in more detail in Clean Components if you want to learn more.

📜 25 Vue Tips You Need to Know

I've written 58 Vue tips so far this year for you.

That's 2 every week for 29 weeks (since March 22).

I put 25 of them together for you in this one article (which is one of the top Vue posts of all time on DEV.to).

Read it now: 25 Vue Tips You Need to Know

🗞 Nuxt 3 is nuxt week!

It's coming October 12.

This is going to be huge, and I can't wait to try it out:

• Vue 3
• Vite
• Typescript
• and so many other features

Learn more about what's coming with Nuxt 3.

💬 The real problem

Sometimes the problem is to discover what the problem is. — Gordon Glegg

I've wasted so much of my life trying to solve things that weren't actually problems.

Now I try to make sure that what I think is the problem is actually the problem.

It saves me so much time and effort.

🧠 Spaced-repetition: Master computed props

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.

When a function does more than just return a value, it makes your code more complicated.

These are called side effects, and you should never have them inside of a computed prop:

export default {
  computed: {
    fullName() {
      this.fetchUserInformation();  // Side effect
      return `${this.firstName} ${this.lastName}`;
    },
  },
};

However, fixing this is quite straightforward. We can just move that side effect into a watcher that is triggered whenever the computed prop updates:

export default {
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`;
    },
  },

  watch: {
    fullName() {
      this.fetchUserInformation();  // Side effect
    },
  },
};

This applies equally to the composition API, although the syntax is slightly different.

At first glance, this may seem like we made the code more complicated. But actually, we've made it a lot simpler.

This concept is expanded on in my course, Clean Components.

Exclusive tips and insights every week

Join 8335 other Vue devs and get exclusive tips and insights like these delivered straight to your inbox, every week.

You have great content in your emails. I seriously learn something from every one of them. — Titus Decali

Thanks for another beautiful tip 🙏 — Victor Onuoha

Loving these, and the spaced repetition — Mark Goldstein

Sign up here