Exclusive tips every week

Hey!

A lot of stuff this week, but I'll try to keep it short.

Last week at VueConf Toronto was amazing, as always. Thanks to everyone who attended and said hello!

Quick reminder: my 50% off Black Friday sale ends today, so make sure to use the BLACKFRIDAY code soon. Go to my courses page to get started.

If you've been following me a while, you know how much I love patterns!

So, I put together a design patterns email course for you, completely free. You can get it by going here.

The State of Vue.js survey also dropped this week. If you haven't taken it yet, please do! It only takes a few minutes and helps everyone in the community understand more about what you're doing with Vue and how we can make things better.

You can take it here.

I've also been working on a Composable Patterns course!

For years I've been slowly acquiring a collection of patterns and techniques that I've found useful in my work.

Now, it's time for me to share them with you.

Have a fantastic week!

— Michael

🔥 Deep Linking with Vue Router

You can store (a bit of) state in the URL, allowing you to jump right into a specific state on the page.

For example, you can load a page with a date range filter already selected:

someurl.com/edit?date-range=last-week

This is great for the parts of your app where users may share lots of links, for a server-rendered app, or for communicating more information between two separate apps than a regular link provides typically.

You can store filters, search values, whether a modal is open or closed, or where in a list we've scrolled to — perfect for infinite pagination.

Grabbing the query using vue-router works like this (this will work on most Vue frameworks like Nuxt and Vuepress too):

// Composition API
const dateRange = useRoute().query.dateRange;

// Options API
const dateRange = this.$route.query.dateRange;

To change it we use the RouterLink component and update the query:

<RouterLink :to="{
  query: {
    dateRange: newDateRange
  }
}">

🔥 Reactive Routes

It took me way too long to figure this one out, but here it is:

// Doesn't change when route changes
const route = useRoute();

// Changes when route changes
const path = useRoute().path;

If we need the full route object in a reactive way, we can do this:

// Doesn't change when route changes
const route = useRoute();

// Changes when route changes
const route = useRouter().currentRoute.value;

With the Options API you can use $route and $router to get objects that update whenever the route changes.

Since Nuxt uses Vue Router internally, this works equally well in Nuxt and vanilla Vue apps.

Here's a demo to see this for yourself: Demo

🔥 The Hidden Component Pattern

Looking at a component itself is the primary way that we can figure out when and how to refactor it. But we can also look at how the component is used for some clues.

Specifically, we’re looking to see if there are subsets of this component where those features are only used together.

This suggests that there may be more than one component hidden inside of this one.

Let's say we have the following component:

<template>
  <div v-if="conditional">
    <!-- ... -->
  </div>
  <div v-else>
    <!-- ... -->
  </div>
</template>

Because the v-if is at the root, we know that it's not actually adding any value to this component.

Instead, we can simplify by splitting into one component for each branch of our conditional:

<template>
  <ComponentWhereConditionalIsTrue />
  <ComponentWhereConditionalIsFalse />
</template>

Now, we don't need to hard-code the conditional prop — we can just use the more descriptive and specific component.

For another example, if prop1 and prop2 are only ever used together, but never with prop3 and prop4, it could mean that the functionality relying on prop1 and prop2 should be separated from the rest of the component.

In this illustration, the usage of MyComponent always uses two distinct sets of props, prop1 and prop2, or prop3 and prop4:

<MyComponent prop-1="someValue" prop-2="anotherValue" />

<MyComponent prop-1="hello" prop-2="world" />

<MyComponent :prop-3="34" prop-4 />

In our theoretical refactoring, we would split the component to work like this:

<FirstComponent prop-1="someValue" prop-2="anotherValue" />

<FirstComponent prop-1="hello" prop-2="world" />

<SecondComponent :prop-3="34" prop-4 />

Here are the steps to do this refactoring:

1. Look for how the component is being used
2. Identify any subsets of behaviour — props, events, slots, etc. — that don't overlap
3. Simplify using other patterns until it's easy to understand
4. Refactor into separate components based on the subsets of behaviour

Learn more about this pattern in the Clean Components Toolkit.

🎙️ #035 — Error Handling in Vue

All of you have seen users do weird things with your application and running into strange scenarios — who can't relate to this?

For this and many other reasons, the right way of error handling is important in you application. Join Michael and Alex on a discussion of the different ways one can handle errors in their application.

That includes not always showing an error page, but also handling errors request-based or component-based!

On that note, error messages and how to write decent ones that are helpful for the users are discussed, as well as how components like NuxtErrorBoundary work under the hood.

Watch on YouTube or listen on your favorite podcast platform.

Chapters:

• The good old error page
• Write good error messages!
• The Vue global error handler
• Server vs. Client Errors in Nuxt.js
• The vue:error hook
• Global error handling for $fetch and interceptors
• Throw unhandled errors in Prod with Vue 3.5?
• Component-level error handling
• NuxtErrorBoundary
• defineAsyncComponent
• Request-based error handling
• New default values in Nuxt 4
• Error Tracking
• Actually handling the errors
• Wrapping up

In case you missed them:

• #034 — Data Fetching in Vue and Nuxt
• #033 — Vue or React? (with CJ from Syntax)
• #032 — Getting Started with Vue.js (with Simone Cuomo)

📜 The Extract Conditional Pattern in Vue

An extremely common question I get asked all the time is, “how do you know when to split up a component?”

I want to share a simple pattern with you that is basically fool-proof, and can be applied to lots of components with almost no thought.

Check it out here: The Extract Conditional Pattern in Vue

📜 My Favourite Nuxt Features

In this article I explore several features of Nuxt that I think are the most interesting.

This will give you a good overview of why Nuxt is so great to work with.

Check it out here: My Favourite Nuxt Features

📅 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

💬 Carpentry vs. Software

"In carpentry you measure twice and cut once. In software development you never measure and make cuts until you run out of time." — Adam Morse

🧠 Spaced-repetition: Detect mouse hover in your component

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 detect a mouse hover in Vue just by listening to the right events:

<template>
  <div
    @mouseover="hover = true"
    @mouseleave="hover = false"
  />
</template>

Then you can use this state to change how the background is rendered, update computed props, or anything else you want.

Depending on your use case, you may want to check out the mouseout and mouseenter events as well. There are some subtleties with how they bubble and interact with child elements.

🔗 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.