Exclusive tips every week

Hey!

Happy New Year! Hope 2026 is treating you well so far. Time to kick off the year with some great Vue and Nuxt content.

Here's what I've got for you this week.

— Michael

🔥 Destructuring in a v-for

Did you know that you can destructure in a v-for?

<li
  v-for="{ name, id } in users"
  :key="id"
>
  {{ name }}
</li>

It's more widely known that you can grab the index out of the v-for by using a tuple like this:

<li v-for="(movie, index) in [
  'Lion King',
  'Frozen',
  'The Princess Bride'
]">
  {{ index + 1 }} - {{ movie }}
</li>

When using an object you can also grab the key:

<li v-for="(value, key) in {
  name: 'Lion King',
  released: 2019,
  director: 'Jon Favreau',
}">
  {{ key }}: {{ value }}
</li>

It's also possible to combine these two methods, grabbing the key as well as the index of the property:

<li v-for="(value, key, index) in {
  name: 'Lion King',
  released: 2019,
  director: 'Jon Favreau',
}">
  #{{ index + 1 }}. {{ key }}: {{ value }}
</li>

🔥 Dynamic Returns

A composable can either return a single value or an object of values. Typically, these values are refs.

But we can also dynamically switch between the two depending on what we want to use the composable for:

// Grab only the single value
const now = useNow()

// Get more granular access to the composable
const {
  now,
  pause,
  resume
} = useNow({ controls: true })

This is great because we may only need a single value most of the time. So why complicate the interface for the main use case?

But by dynamically providing the full object of refs, we allow for more advanced use cases as well. Even if they are rarely used.

Here is how we might implement that:

export default useNow(opts) {
  const {
    controls = false,
  } = opts;

  // Do some things in your composable

  if (controls) {
    return { now, pause, resume };
  } else {
    return now;
  }
}

🔥 Don't Override Component CSS

It can be really tempting to quickly modify a component's CSS from outside the component. If all you need is a slight modification, it seems harmless — but it's not.

Let's say you have a normally blue button, but you need it to be green in this specific case. You can override the background colour from the parent component like this:

<template>
  <Button class="green">Make this button green</Button>
</template>

<style>
.green.button {
  background: green;
}
</style>

This does work, but it's very fragile and prone to breaking.

What if the class name changes?

What if the HTML of the component is modified?

Anyone making changes to the button component will have no idea that this component's background colour is overridden. They won't know to update this component too.

Instead, we can just extend the functionality of the button component. That way, we keep all of the code that modifies the button inside the button component.

Here, we can add a is-green prop to the button component:

<template>
  <Button is-green>Make this button green</Button>
</template>

<style>
/* No extra styles needed! */
</style>

Adding to the component itself makes it easier for anyone else who might need this button to be green in the future!

📜 What are Effect Scopes in Vue?

Learn about effect scopes in Vue, how they work, and how to use them to manage your effects and write better Vue components.

Check it out here: What are Effect Scopes in Vue?

📜 Optimizing a Vue App

Michelle does an excellent job of giving a high-level overview of best practices to keep your app speedy.

Great as a starting off point or checklist for anyone looking to optimize their Vue app.

Check it out here: Optimizing a Vue App

💬 Achieving perfection

"When debugging, novices insert corrective code; experts remove defective code." — Richard Pattis

🧠 Spaced-repetition: Auto-imports in Nuxt 3

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.

In Nuxt 3, instead of importing all of your dependencies like this:

// Part of my blog
import BasicLayout from './BasicLayout.vue';
import Footer from '../components/Footer';
import Subscribe from '../components/Subscribe';
import LandingMat from '../components/LandingMat';
import Logo from '../icons/Logo';
import LogoClip from '../icons/LogoClip';
import TriangleShape from '../icons/TriangleShape';
import SquareShape from '../icons/SquareShape';

You import them like this:

// ...just kidding. No imports needed!

Just use your components, composables, or layouts where you need them, and Nuxt takes care of the rest.

It may seem like a small thing, but auto-imports in Nuxt 3 make the whole developer experience so much nicer. It only imports what you need, when you need it.

This makes your app much faster as well!

Yes, your dependencies are now less explicit. But if you keep your components and composables small enough it shouldn’t matter that much. You should still be able to see pretty quickly what’s going on in your application.

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