🔥 (#151) Multiple named slots, decoupling components, and nested refs

Hey!

The work continues on Reusable Components.

Last week I worked mostly on supporting multiple products in my platform.

This week, I'm working on the content for the Reusable Components update (coming sometime in March).

While plans can change, here's my plan for the update:

1. It will be in the same format that the Clean Components Toolkit has.
2. A focus on how to reuse components specifically, covering the 6 Levels of Reusability along with a bunch of other patterns and tools. Composables and logic are covered in Clean Components Toolkit, and I hope to do more with them in the future, but not right now.

You can check out the product page to learn more about it.

— Michael

Vue Tips Collection 2

Maybe you just want to stay on top of the latest features, remind yourself of interesting things Vue can do, and get daily inspiration.

Vue Tips Collection is a beautiful book of 118 concise tips, as well as a daily email to get your creative juices flowing.

​Check out Vue Tips Collection​

🔥 Decouple Components

Changes are really difficult to make if components have lots of dependencies on each other, or if they're doing multiple things at once — often these issues come together.

If we can disentangle the spaghetti code we can make our lives a lot simpler.

Here's how we can do this:

• Single Responsibility Principle (SRP) — Each component should have a specific and clear purpose. This makes it easier to know where new code should go, or how to use a component. If you can't come up with a good, meaningful name easily, then that's a sign the component is probably doing too much.
• Isolating knowledge — Keep knowledge about domains, systems, and decisions encapsulated in a single spot. This is DRY code in action, and makes it easier to update things in the future since we don't have to track down multiple places all over our code base.

🔥 Multiple Named Slots

Named slots allow you to design components with multiple content insertion points, each identified by a unique name.

This is particularly useful when a single slot isn't sufficient for the component's complexity.

For example, an Input component might need to display icons before or after the input field:

  <!-- Input.vue -->  
  
  <template>  
  
    <div class="input-styling">  
  
      <slot name="icon-before" />  
  
      <input ...>  
  
      <slot name="icon-after" />  
  
    </div>  
  
  </template>  
  

Using the component, you can choose where to place an icon by targeting the specific named slot:

  <template>  
  
    <Input>  
  
      <template #icon-before>  
  
        <IconBefore />  
  
      </template>  
  
    </Input>  
  
    <Input>  
  
      <template #icon-after>  
  
        <IconAfter />  
  
      </template>  
  
    </Input>  
  
  </template>  
  

Named slots can be applied in any order and are referenced directly under the component they belong to.

They can also be dynamically generated, offering even more flexibility.

🔥 Nested Ref Properties in Templates

One thing that's a little tedious with refs is when you need to access a nested property within the template:

  <template>  
  
    <div id="app">  
  
      <p v-for="el in arr">{{ el.value.text }}</p>  
  
    </div>  
  
  </template>  
  
    
  
  <script setup>  
  
  const arr = reactive([]);  
  
    
  
  arr.push(ref({ text: 'hello' }));  
  
  arr.push(ref({ text: 'world' }));  
  
    
  
  setTimeout(() => (arr[0].value.text = 'nothing'), 1000);  
  
  </script>  
  

You can't just rely on auto-unwrapping of refs, you have to explicitly access the .value and then grab the nested property from there:

  ref.value.nestedProperty  
  

In this case, using a reactive value might be preferable — if the syntax is really bothering you.

📜 7 New Features in Nuxt 3.9

There are lots of great new features in Nuxt 3.9.

I took some time to dive a bit deeper into 7 of them, and I think you'll find them really interesting!

Check it out here: 7 New Features in Nuxt 3.9

💬 Creating complexity

"The purpose of software engineering is to control complexity, not to create it." — Unkown

🧠 Spaced-repetition: Mixing local and global styles together

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.

Normally, when working with styles we want them to be scoped to a single component:

  <style scoped>  
  
    .component {  
  
      background: green;  
  
    }  
  
  </style>  
  

In a pinch though, you can also add a non-scoped style block to add in global styles if you need it:

  <style>  
  
    /* Applied globally */  
  
    .component p {  
  
      margin-bottom: 16px;  
  
    }  
  
  </style>  
  
    
  
  <style scoped>  
  
    /* Scoped to this specific component */  
  
    .component {  
  
      background: green;  
  
    }  
  
  </style>  
  

Be careful, though — global styles are dangerous and hard to track down. Sometimes, though, they're the perfect escape hatch and precisely what you need.

p.s. I also have four products/courses: Clean Components Toolkit, Vue Tips Collection 2, Mastering Nuxt 3, and Reusable Components

​

Unsubscribe | 8 Queen St N, Kitchener, ON N2H2G8