Michael Thiessen

🔥 (#196) Decouple Components, async components, and more

Read this on my blog

Hey,

I'm wrapping up work now and spending the rest of this year with my family.

Flying for the first time with my daughter! Hopefully that goes smoothly and isn't too much of an adventure.

I've been hard at work on the content for Composable Design Patterns, and I've got a batch of 4 more patterns nearly ready to go.

Here's a new article I wrote for you:

Scaling Your Vue App: 4 Proven Patterns to Keep It Clean

And of course, an awesome new episode of DejaVue, some tips, and some links.

Have a great week!

— Michael

🔥 Decouple Components

Changes are really difficult to make if components have lots of dependencies on each other, or if they’re doing multiple things at once — often these issues come together.

If we can disentangle the spaghetti code we can make our lives a lot simpler.

Here’s how we can do this:

  • Single Responsibility Principle (SRP) — Each component should have a specific and clear purpose. This makes it easier to know where new code should go, or how to use a component. If you can’t come up with a good, meaningful name easily, then that’s a sign the component is probably doing too much.
  • Isolating knowledge — Keep knowledge about domains, systems, and decisions encapsulated in a single spot. This is DRY code in action, and makes it easier to update things in the future since we don’t have to track down multiple places all over our code base.

🔥 Check Vue’s Version

Did you know that you can easily check the version of Vue at runtime?

import { version } from 'vue';



if (version.split('.')[0] === '2') {

  console.log('Uh, this app is gonna crash.');

  console.log('Upgrade to Vue 3!');

}

🔥 Async Components

Using async components is a great way to speed up the initial load time of your app.

It's pretty straightforward to use in Vue 3:

// Regular, synchronous component

import MyComponent from './MyComponent.vue';



// Loading it asynchronously

import { defineAsyncComponent } from 'vue';

const AsyncComponent = defineAsyncComponent(

  () => import('./MyComponent.vue')

);

Like other components, you can also register them globally:

app.component('AsyncComponent', defineAsyncComponent(

  () => import('~/components/MyComponent.vue')

);

That's all there is to it. Seriously! Just use AsyncComponent like any other component.

The syntax for Vue 2 is not that different, you just don't need to use a helper function:

const AsyncComponent = () => import('./components/LazyLoadingFTW.vue');

You can also provide a bunch of other options for async components, including:

  • Loading and error components
  • Delay before showing the loading component
  • Timeout before showing the error component
  • Custom onError handler

It also automatically hooks into the new suspense feature, which creates all sorts of magic.

Here are the docs for Vue 3 async components.

🎙️ #038 — Self-founding and growing a Nuxt-based SaaS (with Sumit Kumar)

In this episode of DejaVue, Alex and Michael are joined by Sumit Kumar, the founder of Parqet.

Sumit shares his journey from getting into Web Development and Vue.js over to working at Stripe and eventually founding Parqet, a (German) portfolio tracker SaaS.

Topics covered in the first part of our conversation include a lot of business insights, such as the transition from being a developer to being a founder, the challenges and benefits of bootstrapping, as well as the importance of marketing.

Watch on YouTube or listen on your favorite podcast platform.

Chapters:

In case you missed them:

đź“ś Composable Design Patterns in Vue

Learn how to write better composables in Vue. Use these seven patterns to manage state, logic, configuration, and input flexibility.

Check it out here: Composable Design Patterns in Vue

đź“ś Scaling Your Vue App: 4 Proven Patterns to Keep It Clean

As your Vue app grows, it can become harder to keep it organized. Learn four proven patterns that help simplify data flow, testing, configuration, and flexibility, ensuring your code remains clean and scalable.

Check it out here: Scaling Your Vue App: 4 Proven Patterns to Keep It Clean

đź“… 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

đź’¬ 90%

"The first 90 percent of the code accounts for the first 90 percent of the development time. The remaining 10 percent of the code accounts for the other 90 percent of the development time." — Tom Cargill

🧠 Spaced-repetition: Easily Mock API Routes in Nuxt

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.

If you've ever written unit tests, you'll have needed to mock out API endpoints that are used in your components or stores.

With @nuxt/test-utils this is really simple, because you get the registerEndpoint utility method:

import { registerEndpoint } from '@nuxt/test-utils/runtime';

import userTestData from './userTestData.json';



registerEndpoint('/users/', () => userTestData);



// ...tests

You can mock any server route (API endpoint), including external endpoints if you need.

Michael Hoffman curates a fantastic weekly newsletter with the best Vue and Nuxt links.

Sign up for it here.

p.s. I also have a bunch of products/courses:

Related Articles