Exclusive tips every week

Hey there!

This summer has been a busy one for me, but I'm finally done with all the weddings and travelling.

Now I have time to really focus on producing more Vue content for you.

I've got some exciting things coming in the next few months — it's going to be epic!

I can't really say more than that now.

Yes, I'm slowly working through an update for Clean Components. But this is an opportunity for a project that came up recently, and I just couldn't say no.

(You'll have to wait to find out why)

But for now, I've got some more Vue tips for you.

— Michael

p.s. If you love these newsletters I send out, please share it with a co-worker or friend who you think will also enjoy it! Thanks!

🔥 Start with the Interface

When writing a composable, don’t immediately dive into implementing it.

Instead, take a moment to figure out how you will be using the component. Take some time to think about the interface between the composable and the rest of your app.

A few minutes upfront can save you a lot of tears and frustration later on.

Here are a few questions you may want to ask yourself before starting:

1. What arguments should the composable receive?
2. What options do we want to include?
3. What does the composable return?
4. Do we want to use dynamic return values here?
5. What does the minimum useful version look like, and how quickly can we get there?
6. What does the final version look like? Is there anything easy we can do now to prepare for that?

Of course, your composable will change and evolve over time.

But it’s much easier to start off heading in the right direction.

🔥 Nuxt Content Queries

Nuxt Content 2 gives us an effortless way to query our content using the queryContent method:

// composables/useArticles.js

export default () =>
  queryContent('articles')
    .where({
      // Optional fields that may be true or non-existent
      ghost: { $ne: true },
      newsletter: { $ne: true },
      // Don't render articles scheduled for the future
      date: { $lte: new Date() },
    })
    .only(['title', 'path', 'description', 'date', 'tags'])
    .sort({ date: -1 })
    .find();

Here, I’ve created a composable called useArticles for my blog, which grabs all of the content inside of the content/articles/ directory.

The queryContent composable is a query builder, which gives us a lot of expressiveness in what data we fetch. Let’s see how we’re using this here.

First, we’re using a where clause to filter out all the articles we don’t want. Sometimes I will add an article before I want it to be “published” to the site.

I do this by setting the date in the future and then only taking articles before “today” using this clause:

date: { $lte: new Date() }

Second, some articles are the newsletters I write each week. Others are pieces of content that I want to keep in the articles folder but don’t want to be published.

I use frontmatter fields to specify this:

---
newsletter: true  # This is a newsletter
---

---
ghost: true  # This content won't appear on the site
---

Third, we use the only clause to grab just the fields we need. By default, the queryContent method returns a lot of data, including the entire piece of content itself, so this can make a big difference in payload size.

Lastly, as you have probably guessed, we have a sort clause to sort the articles so the most recent ones appear last.

The queryContent composable has more options than this, which you can read about on the docs.

📜 The 101 guide to Script Setup in Vue 3

Using script setup in Vue 3 greatly reduces boiler-plate code.

But there are some differences between using this approach and setup method approach.

This article by Anthony Konstantinidis covers all of the things you need to know to get started with script setup in Vue 3.

Read it here: The 101 guide to Script Setup in Vue 3

💬 The absence of bugs

"Testing can only prove the presence of bugs, not their absence." — Edsger W. Dijkstra

🧠 Spaced-repetition: My favourite git commands

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.

Here are a few of my favourite git commands (is it weird to have favourite git commands?):

I'm often jumping back and forth between different branches, and typing is annoying:

# Checkout the previous branch
git checkout -

Sometimes I add new files, then realize I don't actually need them:

# Remove any files not tracked by git
git clean

Or I completely broke everything and need to start over:

# Undo all changes to git and the working directory,
# going back to the most recent commit
git reset --hard

Github takes all of the commits on your PR branch and combines them into a single one when you merge. But sometimes you want to merge a branch, and you aren't ready for a PR just yet:

# Squash all commits from a branch into one commit
git merge --squash <branch>
git commit

p.s. I also have two courses: Reusable Components and Clean Components