Join 11,067 other Vue devs and get exclusive tips and insights delivered straight to your inbox, every week.
👋Hey friend! I work hard to send you amazing stuff each week.
— Michael
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
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 windowconst { 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 windowconst { 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 windowuseEvent('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 windowconst {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 windowuseEvent('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.
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>
In Nuxt 3, instead of importing all of your dependencies like this:
// Part of my blogimport 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.
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:
In case you missed them:
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 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
Here are some upcoming events you might be interested in. Let me know if I've missed any!
The first Czech Vue.js conference, taking place in Cinema City - Nový Smíchov
A community-driven Vue conference in Germany. Listen to great talks from great speakers and meet the wonderful VueJS Community.
My favourite Vue conference, in my own backyard! A three-day event with workshops, speakers from around the world, and socializing.
The biggest Vue conference in the world! A two-day event with workshops, speakers from around the world, and socializing.
"The only way to learn a new programming language is by writing programs in it." — Dennis Ritchie
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 configuremockComponent('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
Michael Hoffman curates a fantastic weekly newsletter with the best Vue and Nuxt links.
p.s. I also have four products/courses: Clean Components Toolkit, Vue Tips Collection 2, Mastering Nuxt 3, and Reusable Components