Exclusive tips every week

Join 11,067 other Vue devs and get exclusive tips and insights delivered straight to your inbox, every week.

    Picture of Michael Thiessen

    👋Hey friend! I work hard to send you amazing stuff each week.

    — Michael

    I really love and enjoy reading these emails.

    You are one of the most pro VueJS devs I know, and I am happy that you share this knowledge.

    Fabian Beer

    Here's my latest newsletter

    🔥 (#73) Nuxt Content Queries

    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 () =>
          // 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 })

    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

    Here's what others are saying

    I'm starting to think that your newsletter is one of the best things that happened to me this year. I just love these emails.
    Stanislaw Gregor
    I'm somewhere in the upper-middle level at Vue, and I never miss an email you and always find something cool when reading!
    Eduard Climov
    This is the first time where I'm actually enjoying email newsletters. I like your format a lot.
    Fahmi Alfituri
    You have great content in your emails. I seriously learn something from every one of them.
    Titus Decali
    Just wanted to say I enjoy these emails. They encourage me to constantly improve my craft. Fantastic work.
    Joe Radman
    Thanks for another beautiful tip 🙏
    Victor Martins Onuoha
    Loving these, and the spaced repetition.
    Mark Goldstein
    I really enjoy reading your emails, because I love Vue. Thanks for these emails.
    Arturo Espinoza
    I really love and enjoy reading these emails. You are one of the most pro VueJS devs I know, and I am happy that you share this knowledge.
    Fabian Beer
    THANK YOU! I did not know about the deep property, so I assumed you simply couldn't watch objects.
    Darryl Noakes
    I really must say you are doing a really great job. Now I am aware of a cleaner and more performant way to use Tailwind. Thanks a lot!
    Henry Eze
    Thank you so much, I really enjoy and appreciate your emails.
    Carlos Gonzalez
    Thanks for sharing great Vue tips.
    Fernando Navarro
    I really enjoy these tips.
    Martin H
    Thank you so much for the weekly Vue education. Thanks and live on longer to educate us more.
    Kabolobari Benakole
    I look forward to your emails every week. This week was something I knew, but I like to be reminded of. Thanks for keeping it up!
    Nathan Strutz
    Thank you for your weekly emails. I always look forward to learning a new tip about Vue or at least relearning old tips :)
    Colin Johnson
    I have really been enjoying your weekly emails, and I also got my two team members to join in on the fun as well.
    Keith Dawson
    Thank you for your newsletter, your explanations have very concise examples and I like it.
    Nicolas Decayeux
    Thanks A LOT for your great work!!! One of the few newsletters that I let pass!
    Martin Tillmann
    🎉 Get 30% off Vue Tips Collection!
    Get it now!