Exclusive tips every week

Hey!

I had some fun writing this latest article for you.

What would it look like to approach the same problem with different amounts of experience?

How can you use patterns and good architecture to create a way better solution?

I hope you enjoy this one!

Junior vs Senior: Building Modals in Vue

— Michael

🔥 Restrict a prop to a list of types

With the Composition API we get fantastic TypeScript support, so this is quite straightforward:

defineProps<{
  src: string;
  style: 'square' | 'rounded';
}>();

Doing this in the Options API is more complicated, and not as powerful as TypeScript.

Using the validator option in a prop definition you can restrict a prop to a specific set of values:

export default {
  name: 'Image',
  props: {
    src: {
      type: String,
    },
    style: {
      type: String,
      validator: s => ['square', 'rounded'].includes(s)
    }
  }
};

This validator function takes in a prop and returns either true or false — if the prop is valid or not.

I often restrict props like this when I need more options than a boolean will allow but still want to restrict what can be set.

Button types or alert types (info, success, danger, warning) are some of the most common uses — at least in what I work on. Colours, too, are a really great use case for this.

🔥 toRef default value

You've been using toRef for a while, but did you know you can also supply a default value?

const bank = reactive({
  Rand: 3400,
  Egwene: 20,
  Matrim: 230340,
  Padan: -20340,
})

// toRef(object, property, default)
const myBankAccount = toRef(bank, 'Michael', 1000 * 1000);

Probably the easiest way to become a millionaire.

🔥 Auto-imports in Nuxt 3

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.

📜 Suspense: Everything You Need to Know

I wrote this article for VueSchool.io to clear up some misconceptions I've seen around Suspense.

If you load data in your application, I think you'll find it useful.

There are even some code demos so you can code along with the article!

Check it out here: Suspense: Everything You Need to Know

📜 Data Fetching Basics in Nuxt

Nuxt offers a set of powerful built-in tools for handling data fetching.

It provides composable functions that make it easy to fetch data and automatically handle server-side rendering, client-side hydration, and error handling. This enables you to write clean and efficient code, ensuring an optimal user experience.

In this article we’ll examine the different methods Nuxt gives us for data fetching.

Check it out here: Data Fetching Basics in Nuxt

💬 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: Async Without Await

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.

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;
}

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