🔥 Vue Tips #29: Component Seams Framework: The easy way to split up components
Tags: vue, webdev, javascript, tutorial
Published: 2021-10-12 16:00:14

---
title: "🔥 Vue Tips #29: Component Seams Framework: The easy way to split up components"
published: true
description: "Accessing parent components, easily creating component variations, structuring a Vue project, and automating chaos."
canonical_url: https://michaelnthiessen.com/weekly-029-october-06/
tags: vue, webdev, javascript, tutorial
series: Vue Tips
---

_This newsletter was sent out to my list on October 6, 2021. [Sign up here](https://michaelnthiessen.com/newsletter) 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:
```html
<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](https://v3.vuejs.org/api/directives.html#v-pre) and [v-once](https://v3.vuejs.org/api/directives.html#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_.
1. **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).
1. **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](michaelnthiessen.com/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](https://dev.to/michaelthiessen/25-vue-tips-you-need-to-know-2h70)

## 🗞 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](https://nuxtjs.org/v3).

## 💬 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](https://michaelnthiessen.com/side-effect-surgery), and you should never have them inside of a computed prop:
```js
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:
```js
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](https://michaelnthiessen.com/side-effect-surgery).

This concept is expanded on in my course, [Clean Components](https://michaelnthiessen.com/clean-components).

## Exclusive tips and insights every week

Join 8335 other Vue devs and [get exclusive tips and insights](michaelnthiessen.com/newsletter) 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](michaelnthiessen.com/newsletter)