Join 11,067 other Vue devs and get exclusive tips and insights delivered straight to your inbox, every week.
đź‘‹Hey friend! I work hard to send you amazing stuff each week.
— Michael
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!
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:
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 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.
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
"Testing can only prove the presence of bugs, not their absence." — Edsger W. Dijkstra
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