🔥 (#163) Mastering Prose Components in Nuxt Content

Hey!

I recently published a big article on the Mastering Nuxt blog — it's one of my favourites in a long time!

In it, I share five different examples of how you can use Prose Components in Nuxt Content. There are some pretty interesting use cases in there, and I had a ton of fun writing this one.

Mastering Prose Components with Nuxt Content

You can also check out the live demo here.

And as always, enjoy your tips!

— Michael

🔥 What are all these loops for?

I always forget this, so this tip is mostly for me — hopefully, I won't have to keep looking this up!

We have 3 types of for loops in Javascript:

1. for...in
2. for...of
3. for

But how do you know which one to use?

For iterating through properties of an object, use for...in:

const numbers = {
  'one': 1,
  'two': 2,
  'three': 3,
};

// We get the properties of the object, not the values
for (const number in numbers) {
  console.log(number);
}

// Prints: 'one' 'two' 'three'

Items in a list (also called an iterable object) like an Array or Set, we use for...of:

const numbers = ['one', 'two', 'three'];

// We get each of the elements in the Array
for (const number of numbers) {
  console.log(number);
}

// Prints: 'one' 'two' 'three'

You can use for...in with an Array since all the indices are just the object's properties. But you may not get them in the correct order, and you'll also get any other properties the Array has :/

And you know how to use a regular old for loop, which lets you have a lot more control with some extra typing.

🔥 Extract Conditional Pattern

This is one of my favourite tools from the Clean Components Toolkit.

It's super easy to implement, and can be applied in so many situations to clean up your code fairly quickly.

We can apply this in almost any place we have a v-if in our component.

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:

1. Each branch is semantically related
2. 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.

However, this pattern doesn't always work well. If we have a lot of branches we may want to switch to using the Strategy Pattern, another tool included in the Clean Components Toolkit.

📜 Mastering Prose Components with Nuxt Content

I think that Prose Components are one of the most underrated parts of Nuxt Content.

We can do tons of really cool things with them — and they're so easy to set up.

In this article I build five different components, each showing a different use case for Prose Components.

Check it out here: Mastering Prose Components with Nuxt Content

💬 Simplicity

"Complicated code is a sign that you don't understand your program well enough to make it simple." — Steve McConnell

🧠 Spaced-repetition: Reactive SVG components

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.

SVGs can be reactive components, too.

After all, they're HTML elements just like div, span, and button.

Here's an SVG component that has a prop to change it's fill colour:

<template>
  <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <circle cx="50" cy="50" r="50" :fill="color" />
  </svg>
</template>
<script setup lang="ts">
defineProps<{
  color: string
}>();
</script>

I'm sure you can build some pretty wild things if you dig into different SVG elements and attributes.

Scoped slots and SVGs? Why not...

Here's a demo if you want to see this example in action.

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