🔥 (#198) Destructuring in a v-for, structuring composables, and more

Hey all!

Last week I didn't send out a newsletter because I was busy with the holidays and was hanging out with family instead.

I'm back now and ready to share some tips with you.

Once I'm back to work I'll be able to polish up the next set of patterns for Composable Design Patterns and send them out (if you've bought the early access).

Hopefully the new year is going well for you so far!

— Michael

🔥 Structuring Composables

To keep your composables — those extracted functions written using the composition API — neat and easy to read, here's a way to organize the code.

1. Component and directives
2. provide and inject
3. defineProps, defineEmits, and defineExpose (when using script setup)
4. refs and reactive variables
5. Computed properties
6. Immediate watchers
7. Watchers
8. Lifecycle methods, in their correct order
9. Non-reactive state
10. Methods
11. Async code using await (or Promises if you're into that sort of thing)

Why this order? Because it more or less follows the order of execution of the code.

It's also based on the this linting rule.

🔥 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>

🔥 Global Properties

It's possible to add global properties to your Vue app in both Vue 2 and Vue 3:

// Vue 3
const app = createApp({});
app.config.globalProperties.$myGlobal = 'globalpropertiesftw';

// Vue 2
Vue.prototype.$myGlobal = 'globalpropertiesftw';

I would recommend prefixing any global properties with a $.

This helps prevent naming conflicts with other variables, and it's a standard convention that makes it easy to spot when a value is global.

This global property can be accessed directly off of any component when using the Options API:

computed: {
  getGlobalProperty() {
    return this.$myGlobal;
  },
},

Why can't this be used with the composition API?

Because the composition API is designed to be context-free and has no access to this.

Instead, you can create a simple composable to access your globals:

<script setup>
import useGlobals from './useGlobals';
const { $myGlobal } = useGlobals();
</script>

// useGlobals.js
export default () => ({
  $myGlobal: 'globalpropertiesftw',
});

🎙️ #040 — Composition API vs Options API Special

This DejaVue episode comes as a little special! As a belated Christmas present, we got everything, literally everything that was discussed on this podcast about one big topic: Composition API vs. Options API.

A lot of our previous guests had their own takes on the two APIs — and some might surprise you! So, why not tuning in and hear fifteen people talk about their opinions, insights and suggestions when it comes to using their preferred API in Vue — and why.

Watch on YouTube or listen on your favorite podcast platform.

Chapters:

• Welcome to the DejaVue Special
• Evan You
• Natalia Tepluhina
• Tim Benniks
• Joe Tannenbaum
• CJ Reynolds
• Simone Cuomo
• Sumit Kumar
• Jakub Andrzejewski
• Rijk van Zanten
• Eduardo San Martin Morote
• Vue Toronto Panel
• Wrapping Up

In case you missed them:

• #039 — Migrating a SaaS from Nuxt 2 to Nuxt 3 (with Sumit Kumar)
• #038 — Self-founding and growing a Nuxt-based SaaS (with Sumit Kumar)
• #037 — VueConf Toronto Panel (with Evan You, Daniel Roe, Sigrid Huemer and John Leider)

📜 The Vite Ecosystem

Vite has taken web development tooling to a new level.

This article explores all of the different tools Vite uses and interacts with, and shows just how much it affects the web development community.

It's very cool to see a project that started out in Vue-land gain wide adoption like this!

Check it out here: The Vite Ecosystem

📜 Prisma with Nuxt: Modifying Data with Prisma (5 of 5)

So far in this series we’ve covered a lot on how to use Prisma in our Nuxt apps.

But we’ve left out a major piece — actually being able to modify the data in the database.

A pretty crucial part of the puzzle I think!

In this article I'll show you how to modify data in your database using Prisma.

Check it out here: Prisma with Nuxt: Modifying Data with Prisma (5 of 5)

📅 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)

A great Vue conference, this year held in Tampa. Two days of conference talks, plus a day for workshops.

Check it out here

💬 Unhappy

"You're bound to be unhappy if you optimize everything." — Donald Knuth

🧠 Spaced-repetition: Reactive Routes

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.

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

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