Exclusive tips every week

Hey all,

In case you missed it, I just launched a free mini-course called Reactivity From Scratch.

It's a free course that goes over how to build your own Composition API inspired reactivity system from scratch.

No matter your skill level, I think you'll find it useful!

Check it out here: Reactivity From Scratch.

Of course, I also have some great tips for you.

— Michael

🔥 Example of a Composable Using the Options Object Pattern

Let’s create a useEvent composable that will make it easier to add event listeners.

We’ll use the EventTarget.addEventListener method, which require the event and handler parameters. These are the first two required parameters:

export function useEvent(event, handler) {};

But we also need to know which element to target. Since we can default to the window, we’ll make this our first option:

export function useEvent(event, handler, options) {
    // Default to targeting the window
  const { target = window } = options;
};

Then we’ll add in onMounted and onBeforeUnmount hooks to setup and clean up our event:

import { onMounted, onBeforeUnmount } from 'vue';

export function useEvent(event, handler, options) {
    // Default to targeting the window
  const { target = window } = options;

  onMounted(() => {
    target.addEventListener(event, handler);
  });

  onBeforeUnmount(() => {
    target.removeEventListener(event, handler);
  });
};

We can use the composable like this:

import useEvent from '~/composables/useEvent.js';

// Triggers anytime you click in the window
useEvent('click', () => console.log('You clicked the window!'));

The addEventListener method can also take extra options, so let’s add support for that, too:

import { onMounted, onBeforeUnmount } from 'vue';

export function useEvent(event, handler, options) {
    // Default to targeting the window
  const {
        target = window,
        ...listenerOptions
    } = options;

  onMounted(() => {
    target.addEventListener(event, handler, listenerOptions);
  });

  onBeforeUnmount(() => {
    target.removeEventListener(event, handler, listenerOptions);
  });
};

We keep listenerOptions as a pass-through, so we’re not coupling our composable with the addEventListener method. Beyond hooking up the event, we don’t really care how it works, so there’s no point in interfering here.

Now we can take advantage of those extra options:

import useEvent from '~/composables/useEvent.js';

// Triggers only the first time you click in the window
useEvent(
    'click',
  () => console.log('First time clicking the window!'),
  {
    once: true,
  }
);

This is a pretty basic composable, but by using the Options Object Pattern it’s easily configurable and extendable to cover a wide swath of use cases.

🔥 Default Content with Slots

You can provide fallback content for a slot, in case no content is provided:

<!-- Child.vue -->
<template>
  <div>
    <slot>
      Hey! You forgot to put something in the slot!
    </slot>
  </div>
</template>

This content can be anything, even a whole complex component that provides default behaviour:

<!-- Child.vue -->
<template>
  <div>
    <slot name="search">
      <!-- Can be overridden with more advanced functionality -->
      <BasicSearchFunctionality />
    </slot>
  </div>
</template>

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

🎙️ #024 — Between Agency Work and Open Source (with Zoey and Dan from SIDESTREAM)

This episode of DejaVue features two guests from SIDESTREAM, Zoey Kaiser and Dan Kremerov. They discuss balancing agency work with open-source contributions, specifically through Sidebase—a nonprofit spin-off responsible for open-source Nuxt modules like @sidebase/nuxt-auth. The conversation covers the evolution of their tech stack, the benefits of open source, and hiring in the Vue/Nuxt ecosystem.

Watch on YouTube or listen on your favorite podcast platform.

Chapters:

• 00:00 - Welcome to DejaVue
• 01:37 - Sidebase vs SIDESTREAM
• 03:57 - How did you choose Vue and Nuxt?
• 08:21 - Do clients care about your tech stack?
• 10:31 - Finding Vue.js Developer to Hire
• 14:35 - What brought SIDESTREAM to open source?
• 18:45 - Developing Sidebase - From template to starter
• 22:11 - Which choices Sidebase offer?
• 26:03 - The case against wrapper packages
• 28:57 - How did SIDESTREAM benefit from Sidebase?
• 33:17 - Inspired by Open Source
• 37:42 - Influence from previous projects on Sidebase
• 40:33 - Moving from Python to full-stack TypeScript
• 45:48 - Separate services or one Nuxt application?
• 49:47 - The Sidebase Nuxt Auth Module
• 54:14 - Migrating the base of Nuxt Auth to Auth.js
• 56:02 - Other Auth solutions
• 01:02:37 - Dead ends during module development
• 01:07:48 - The future of Sidebase and SIDESTREAM
• 01:15:10 - Wrapping up

In case you missed them:

• #023 — TypeScript Wizardry (with Matt Pocock)
• #022 — Signals and Vue
• #021 — Reactivity in Vue

📜 Building a VS Code Extension Using Vue.js

This is a very interesting article on creating your own VS Code extension...

But you get to build the UI using Vue.

It goes into all the steps necessary to set up and get your extension running. From there, the sky is the limit (unless you're building rockets 🚀).

Check it out here: Building a VS Code Extension Using Vue.js

📜 Nuxt 3: Pages vs. Layouts vs. Components

Nuxt 3 comes with 3 different ways to organize your components: pages, layouts, and components.

It can be difficult to know which to use when, so I wrote this article to help explain the differences.

Check it out here: Nuxt 3: Pages vs. Layouts vs. Components

📅 Upcoming Events

Here are some upcoming events you might be interested in. Let me know if I've missed any!

PragVue 2024 — (September 17, 2024)

The first Czech Vue.js conference, taking place in Cinema City - Nový Smíchov

Check it out here

Vuejs.de Conf — (October 8, 2024 to October 9, 2024)

A community-driven Vue conference in Germany. Listen to great talks from great speakers and meet the wonderful VueJS Community.

Check it out here

Vue Fes Japan 2024 — (October 19, 2024)

Check it out here

VueConf Toronto 2024 — (November 18, 2024 to November 20, 2024)

My favourite Vue conference, in my own backyard! A three-day event with workshops, speakers from around the world, and socializing.

Check it out here

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

💬 Write Programs

"The only way to learn a new programming language is by writing programs in it." — Dennis Ritchie

🧠 Spaced-repetition: Mock Nuxt Components When Testing

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.

When testing, you'll often need to shallow render a component — mocking out any descendent components to keep your test simpler.

With @nuxt/test-utils you can use the mockComponent utility method to help with that:

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

// Use Options API to configure
mockComponent('MyComponent', {
  props: {
    value: String
  },
  setup(props) {
        // ...
  },
});

// Or use a separate file to clean things up (and use <script setup>)
mockComponent('MyComponent', () => import('./MyComponent.mock.vue'));

// ...tests

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

p.s. I also have four products/courses: Clean Components Toolkit, Vue Tips Collection 2, Mastering Nuxt 3, and Reusable Components