Exclusive tips every week

Hey everyone,

December is in full swing, and it's always super busy for me with holiday related things.

But I'm looking forward to winding down work stuff and spending more time with my family.

Here are some tips and other Vue and Nuxt content for you.

Enjoy, and have a great week!

— Michael

🔥 Flexible Arguments

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
}

You can learn more about the Flexible Arguments pattern (and other composable design patterns) in my course: Composable Design Patterns.

🔥 Auto-imports in Nuxt

In Nuxt, 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.

🔥 Async Without Await

Using async logic with the composition API can be tricky at times.

We need to put things in the correct order, or the await keyword will mess things up with our reactivity.

But with the Async Without Await pattern, we don’t need to worry about all of this:

const title = ref('Basic Title');
// We can place this async function wherever we want
const { state } = useAsyncState(fetchData());
const betterTitle = computed(() => `${title.value}!`);

Here’s how this works:

1. We hook up all of our refs synchronously
2. Updates happen asynchronously in the background
3. Because of reactivity, everything “just works”

Here’s a basic sketch of what the useAsyncState composable from VueUse is doing to implement this:

export default useAsyncState(promise) {
  // 1. Create state ref synchronously
  const state = ref(null);

  const execute = async () => {
    // 3. Reactivity will update this when it resolves
    state.value = await promise;
  }

  // 2. Execute promise asynchronously in the background
  execute();
  return state;
}

📜 Handling Assets in Nuxt

Nuxt gives us two great options for managing all of our assets in our web app.

But what’s the difference, and how do you know which to use?

In this article I’ll share some simple questions you can ask yourself to figure out where to put your assets, as well as the differences between the two strategies.

Check it out here: Handling Assets in Nuxt

📜 Ref vs Reactive — Which is Best?

This has been a question on the mind of every Vue dev since the Composition API was first released:

What’s the difference between ref and reactive, and which one is better?

In this article, I explore this question in detail, comparing ref and reactive, giving my own opinion, and sharing other opinions from the community.

Check it out here: Ref vs Reactive — Which is Best?

💬 Repeated failure

"As a rule, software systems do not work well until they have been used, and have failed repeatedly, in real applications." — Dave Parnas

🧠 Spaced-repetition: Looping Over a Range in Vue

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.

The v-for directive allows us to loop over an Array, but it also let's us loop over a range:

<template>
  <ul>
    <li v-for="n in 5">Item #{{ n }}</li>
  </ul>
</template>

This will render out:

• Item #1
• Item #2
• Item #3
• Item #4
• Item #5

When we use v-for with a range, it will start at 1 and end on the specified number.

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