Exclusive tips every week

Hey!

I hope you're having a wonderful week.

Where I'm living in Waterloo, we've already had 140 cm of snow this February. That's almost as much snow in the last 3 weeks as we usually get in an entire winter.

I'm so tired from shoveling snow 🥲

This week I've been working on the lesson outlines for Mastering Nuxt while we get a new design done for the app that we build in the course.

And as always, I've got some tips and articles for you!

— Michael

🔥 Flatten Nuxt Content Routes

I wanted to organize my blog content into several folders:

• Articles: content/articles/
• Newsletters: content/newsletters/

By default though, Nuxt Content would set up these routes to include those prefixes. But I want all of my routes to be at the root level:

• Articles: michaelnthiessen.com/my-latest-article
• Newsletters: michaelnthiessen.com/most-recent-newsletter

We can do this manually for each Markdown file by overriding the _path property through it's frontmatter:

---
title: My Latest Article
date: today
_path: "/my-latest-article"
---

This is extremely tedious, error-prone, and generally annoying.

Luckily, we can write a simple Nitro plugin that will do this transform automatically.

Create a content.ts file in server/plugins/:

export default defineNitroPlugin((nitroApp) => {
  nitroApp.hooks.hook('content:file:afterParse', (file) => {
    for (const prefix of ['/articles', '/newsletters']) {
      if (file._path.startsWith(prefix)) {
        // Keep the prefix so we can query based on it still
        file._original_dir = prefix;
        // Remove prefix from path
        file._path = file._path.replace(prefix, '');
      }
    }
  });
});

Nitro is the server that Nuxt uses internally. We can hook into it's processing pipeline and do a bit of tweaking.

However, doing this breaks queryContent calls if we're filtering based on the path, since queryContent is looking at the _path property we've just modified. This is why we want to keep that original directory around.

We can modify our queryContent calls to filter on this new _original_dir property:

// Before
queryContent('/articles')

// After
queryContent()
  .where({
    _original_dir: { $eq: '/articles' },
  });

Pro tip: use nuxi clean to force Nuxt Content to re-fetch and re-transform all of your content.

🔥 Directly accessing parent components (and why)

Props down, events up. That's how your components should communicate — most of the time.

But in rare cases, that just doesn't work.

If you need direct access to the parent component, you should just use provide/inject to pass down the relevant value or method:

import { provide } from 'vue';
const someMethodInTheParent = () => {};
provide('method', someMethodInTheParent)

Then, inject it into the child component:

import { inject } from 'vue';
const method = inject('method');
method();

In Vue 2, you can also use the instance property $parent:

// Tight coupling like this is usually a bad idea
this.$parent.methodOnParentComponent();

This is simpler, but leads to higher coupling and will more easily break your application if you ever refactor.

You can also get direct access to the application root, the very top-most component in the tree, by using $root. Vue 2 also has $children, but these were taken out for Vue 3 (please don't use this one).

When would these be useful?

There are a few different scenarios I can think of. Usually, when you want to abstract some behaviour and have it work "magically" behind the scenes.

You don't want to use props and events to connect up a component in those cases. Instead, you use provide/inject, $parent, or $root, to automatically connect the components and make things happen.

(This is similar to the Compound Component pattern)

But it's hard to come up with an example where this is the best solution. Using provide/inject is almost always the better choice.

🔥 Mock Any Import in Nuxt

One handy helper method in @nuxt/test-utils is mockNuxtImport.

It's a convenience method to make it easier to mock anything that Nuxt would normally auto-import:

import { mockNuxtImport } from '@nuxt/test-utils/runtime';

mockNuxtImport('useAsyncData', () => {
  return () => {
    return { data: 'Mocked data' };
  };
});

// ...tests

🎙️ #047 — A Vue at Alexander Lichter

If you've listened to the last episode, you know what is coming next!

It is time to get take a Vue at the other host of this podcast. Michael is asking Alex all around his past - from how we got into programming and web development, if university was worth it and how he got into the Nuxt Core Team.

Also don't miss out how Minecraft is part of the history, what non-tech job Alex would do if programming wouldn't be in the cards, and why is GitHub account is over 14 years old.

Watch on YouTube or listen on your favorite podcast platform.

Chapters:

• Welcome to DejaVue
• What are you doing for work?
• What patterns and bad/best practices have you noticed?
• How is it being on the Nuxt team?
• Joining the Nuxt team
• How did you get into programming?
• From Gaming to Modding and Programming
• Getting into Web Development
• Founding a company
• Which courses from university stood out?
• What happened between uni and now?

In case you missed them:

• #046 — A Vue at Michael Thiessen
• #045 — FormKit and Hot Takes (with Justin Schroeder)
• #044 — Our Predictions for Vue and Nuxt in 2025 (with Daniel Roe)

📜 Exploring Server Components in Nuxt

You may have heard about server components, but there are some really interesting things you can do with them.

In this article I explore a few really cool things we can do with server components.

Check it out here: Exploring Server Components in Nuxt

📅 Upcoming Events

Here are some upcoming events you might be interested in. Let me know if I've missed any!

Vuejs Amsterdam 2025 — (March 12, 2025 to March 13, 2025)

The biggest Vue conference in the world! A two-day event with workshops, speakers from around the world, and socializing.

Check it out here

VueConf US 2025 — (May 13, 2025 to May 15, 2025)

Giving a talk here on component patterns! A great Vue conference, this year held in Tampa. Two days of conference talks, plus a day for workshops.

Check it out here

MadVue 2025 — (May 29, 2025)

It's time to get together in Madrid. Join for a full day of talks, activities, and networking with the Vue.js community and ecosystem.

Check it out here

💬 The real problem

"Sometimes the problem is to discover what the problem is." — Gordon Glegg

🧠 Spaced-repetition: Default Content with 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.

You can provide fallback content for a slot, in case no content is provided:

<!-- Child.vue -->
<template>
  <div>
    <slot>
      Hey! You forgot to put something in the slot!
    </slot>
  </div>
</template>

This content can be anything, even a whole complex component that provides default behaviour:

<!-- Child.vue -->
<template>
  <div>
    <slot name="search">
      <!-- Can be overridden with more advanced functionality -->
      <BasicSearchFunctionality />
    </slot>
  </div>
</template>

🔗 Want more Vue and Nuxt links?

Michael Hoffman curates a fantastic weekly newsletter with the best Vue and Nuxt links.

Sign up for it here.