Exclusive tips every week

Hey!

I've got one new article that I just published, all about effect scopes in Vue.

Read it here: What are Effect Scopes in Vue?

And in case you missed it, I also published one on watchers last week: Bulletproof Watchers in Vue

Both of these articles are on topics that I'll be teaching in my new course, Advanced Reactivity, which is coming soon!

Enjoy the rest of the newsletter, and I'll see you again next week!

— Michael

🔥 Another Use for the Template Tag

The template tag can be used anywhere inside your template to better organize code.

I like to use it to simplify v-if logic and sometimes v-for, too.

In this example, we have several elements that all use the same v-if condition:

<template>
  <div class="card">
    <img src="imgPath" />
    <h3>
      {{ title }}
    </h3>
    <h4 v-if="expanded">
      {{ subheading }}
    </h4>
    <div
      v-if="expanded"
      class="card-content"
    >
      <slot />
    </div>
    <SocialShare v-if="expanded" />
  </div>
</template>

It's a little clunky and not initially obvious that a bunch of these elements are being shown and hidden together. But, on a larger, more complicated component, this could become a catastrophic nightmare!

But we can fix that.

We can use the template tag to group these elements. Then lift the v-if on to the template tag itself:

<template>
  <div class="card">
    <img src="imgPath" />
    <h3>
      {{ title }}
    </h3>
    <template v-if="expanded">
      <h4>
        {{ subheading }}
      </h4>
      <div class="card-content">
        <slot />
      </div>
      <SocialShare />
    </template>
  </div>
</template>

Now we have something much easier to read. And it's much easier to understand what's going on at a glance!

🔥 Nested Ref Properties in Templates

One thing that’s a little tedious with refs is when you need to access a nested property within the template:

<template>
  <div id="app">
    <p v-for="el in arr">{{ el.value.text }}</p>
  </div>
</template>

const arr = reactive([]);

arr.push(ref({ text: 'hello' }));
arr.push(ref({ text: 'world' }));

setTimeout(() => (arr[0].value.text = 'nothing'), 1000);

You can’t just rely on auto-unwrapping of refs, you have to explicitly access the .value and then grab the nested property from there:

ref.value.nestedProperty

In this case, using a reactive value might be preferable — if the syntax is really bothering you.

🔥 Debug hydration errors in production Nuxt

Hydration errors are one of the trickiest parts about SSR — especially when they only happen in production.

Thankfully, Vue 3.4 lets us do this.

In Nuxt, all we need to do is update our config:

export default defineNuxtConfig({
  debug: true,
  // rest of your config...
})

If you aren’t using Nuxt, you can enable this using the new compile-time flag: __VUE_PROD_HYDRATION_MISMATCH_DETAILS__.

This is what Nuxt uses.

Enabling flags is different based on what build tool you’re using, but if you’re using Vite this is what it looks like in your vite.config.js file:

import { defineConfig } from 'vite'

export default defineConfig({
  define: {
    __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'true'
  }
})

Turning this on will increase your bundle size, but it’s really useful for tracking down those pesky hydration errors.

📜 Server Routes in Nuxt

Server routes are a powerful feature of Nuxt that allow you to create custom endpoints for your app.

In this article I look at the different types of server routes and how to use them.

Check it out here: Server Routes in Nuxt

📜 Better Navigation with NuxtLink

The NuxtLink component may seem simple at first glance, but there’s a lot going on beneath the surface.

It’s one of the easiest Nuxt components to use, while giving our apps a big performance boost.

In this article we see some things about NuxtLink you may not have known.

Check it out here: Better Navigation with NuxtLink

💬 Chaos

"Automating chaos just gives faster chaos." — Mark Fewster

🧠 Spaced-repetition: Flexible Arguments

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.

Sometimes we have a ref that we want to use with our composable. Sometimes we just have the raw data.

Wouldn’t it be nice if it didn’t matter what we already had? Then we could use our composables and it would just work?

Here’s an example using the useTitle composable from VueUse:

// We have a ref already
const titleRef = ref('This is the title of the page');
useTitle(titleRef);

// We just have the string
const title = 'This is the title of the page';
const titleRef = useTitle(title);

We can do this by implementing the Flexible Arguments pattern:

export function useTitle(maybeRef) {
  const titleRef = ref(maybeRef);

    // Use titleRef in the composable
}

The ref function will either create a ref for us, or return a ref if we give it one.

This means that we can pass it either type and we know we’ll get a ref back.

The opposite is true with the unref function. If we need to use a raw primitive value rather than a ref in our composable, we can use unref to achieve a similar result.

export function useTitle(maybeRef) {
  const titleString = unref(maybeRef);

    // Use titleString in the composable
}

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