Hey!
This week I've got a bunch of stuff to do for Reusable Components before the re-launch on March 5th (two weeks away!).
I'm wrapping up the content side of things — lots of writing, formatting, and general polish. I'm also going to update the landing page. I've updated my site design since I last touched it and I also need to include all the stuff for this update.
And like always, I've got some tips for you.
Have a great week!
— 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
An extremely common question I get asked all the time is, "how do you know when to split up a component?"
I want to share a simple pattern with you that is basically fool-proof, and can be applied to lots of components with almost no thought.
When we encounter a v-if (or v-show) in our template, there's one main pattern we can use:
Extracting the body of each branch into its own component.
This is just one of many patterns included in Clean Components. There, we go into much more detail, examining each pattern more closely and really fine-tuning our understanding.
When we extract each branch body we go from this:
<div v-if="condition">
<div>
<!-- Lots of code here -->
</div>
</div>
<div v-else>
<div>
<!-- Lots of other code -->
</div>
</div>
To this:
<div v-if="condition">
<NewComponent />
</div>
<div v-else>
<OtherComponent />
</div>
We know we can do this for two reasons:
- Each branch is semantically related
- Each branch does distinct work
We know that each branch is semantically related, meaning all of that code works together to perform the same task.
Each branch also does distinct work — otherwise, why have a v-if at all?
This means it's a perfect opportunity to create new components.
And by replacing a large chunk of code with a well-named component that represents the code's intent, we make our code much more self-documenting. But we'll get to that later on.
🔥 Simplify Styling with Default Slot Wrappers
When using slots in Vue, you might want to apply default styling to ensure consistent appearance across uses.
Instead of requiring slot content to be wrapped every time, you can include the styling wrapper within the slot's component:
<!-- StyledSlot.vue -->
<template>
<div class="default-styles">
<slot />
</div>
</template>
Now, when you use the StyledSlot component, the default styles are automatically applied without extra markup:
<template>
<StyledSlot>
Slot content with default styling
</StyledSlot>
</template>
It's a simple thing, but it makes a difference across a whole app.
Be mindful of the type of slot you're creating—layout slots should not include styling, while content slots should.
This practice prevents unnecessary CSS from complicating your layout and ensures a clean, consistent look for your components' content.
🔥 Creating an If...Else Component
Ever thought about making an If...Else component in Vue, despite having v-if, v-else, and v-else-if?
Here's a quirky experiment that explores this idea:
<If :val="mainCondition">
<template #true>Render if true</template>
<Else :if="false">Else if condition</Else>
<template #false>Otherwise render this</template>
</If>
This setup uses Compound Components, default and named slots, and even render functions to achieve a flexible If...Else logic.
The If component checks a condition and decides which slot (true, false, or Else) to render.
The Else component — a Compound Component — allows for an else if condition.
I have a detailed write up about this component on my blog.
Here's a simplified version for a cleaner API:
<If :val="condition">
<True>Truth</True>
<Else :if="elseCondition">Else slot</Else>
<False> What up false branch! </False>
</If>
This experiment is a fun way to dive deep into Vue's features like slots, reactivity, and component communication. While it might not replace the built-in directives, it's a great learning exercise and could inspire other creative component designs.
Check out the demo and maybe even try implementing your version: Vue If...Else Component Demo
Remember — experimenting with "weird" ideas is a fantastic way to deepen your understanding of Vue!
📜 Better Navigation with NuxtLink
The NuxtLink component may seem simple at first glance, but there's a lot going on beneath the surface.
It's one of the easiest Nuxt 3 components to use, while giving our apps a big performance boost.
In this article we see some things about NuxtLink you may not have known.
Check it out here: Better Navigation with NuxtLink
💬 Obvious Deficiencies
"There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies, and the other way is to make it so complicated that there are no obvious deficiencies. The first method is far more difficult." — Tony Hoare
🧠 Spaced-repetition: Using default and named slots
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.
Let's say we're building an If component and we want to use it in two main ways — with a default slot, or with two named slots.
Just the default slot:
<If :val="putConditionHere">
Renders only if it's true
</If>
Or using the named slots to access both branches:
<If :val="putConditionHere">
<template #true>
Renders only if it's true
</template>
<template #false>
Renders only if the condition is false
</template>
</If>
This is how we'd have to arrange the slots in order to make this work:
<template>
<slot v-if="val" />
<template v-if="!$slots.default">
<slot v-if="val" name="true" />
<slot v-if="!val" name="false" />
</template>
</template>
You'll notice we use a template to group the named slots. We're also checking $slots to see if we've put anything in the default slot or not.
We need to do this, otherwise we'll render the default and true slots whenever our condition is true, which isn't what we want! We want these to be mutually exclusive — you can either use the default slot or the named true slot.
Now, we can use it in either way.
Just the default slot to access the true branch, or using two named slots to access both the true and false branches.
p.s. I also have four products/courses: Clean Components Toolkit, Vue Tips Collection 2, Mastering Nuxt 3, and Reusable Components
评论
发表评论