Exclusive tips every week

Join 11,067 other Vue devs and get exclusive tips and insights delivered straight to your inbox, every week.

    Picture of Michael Thiessen

    👋Hey friend! I work hard to send you amazing stuff each week.

    — Michael

    I really love and enjoy reading these emails.

    You are one of the most pro VueJS devs I know, and I am happy that you share this knowledge.

    Fabian Beer

    Here's my latest newsletter

    🔥 (#182) Newsletter 2024-09-11

    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:

    In case you missed them:

    📜 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

    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

    Here's what others are saying

    I'm starting to think that your newsletter is one of the best things that happened to me this year. I just love these emails.
    Stanislaw Gregor
    I'm somewhere in the upper-middle level at Vue, and I never miss an email you and always find something cool when reading!
    Eduard Climov
    This is the first time where I'm actually enjoying email newsletters. I like your format a lot.
    Fahmi Alfituri
    You have great content in your emails. I seriously learn something from every one of them.
    Titus Decali
    Just wanted to say I enjoy these emails. They encourage me to constantly improve my craft. Fantastic work.
    Joe Radman
    Thanks for another beautiful tip 🙏
    Victor Martins Onuoha
    Loving these, and the spaced repetition.
    Mark Goldstein
    I really enjoy reading your emails, because I love Vue. Thanks for these emails.
    Arturo Espinoza
    I really love and enjoy reading these emails. You are one of the most pro VueJS devs I know, and I am happy that you share this knowledge.
    Fabian Beer
    THANK YOU! I did not know about the deep property, so I assumed you simply couldn't watch objects.
    Darryl Noakes
    I really must say you are doing a really great job. Now I am aware of a cleaner and more performant way to use Tailwind. Thanks a lot!
    Henry Eze
    Thank you so much, I really enjoy and appreciate your emails.
    Carlos Gonzalez
    Thanks for sharing great Vue tips.
    Fernando Navarro
    I really enjoy these tips.
    Martin H
    Thank you so much for the weekly Vue education. Thanks and live on longer to educate us more.
    Kabolobari Benakole
    I look forward to your emails every week. This week was something I knew, but I like to be reminded of. Thanks for keeping it up!
    Nathan Strutz
    Thank you for your weekly emails. I always look forward to learning a new tip about Vue or at least relearning old tips :)
    Colin Johnson
    I have really been enjoying your weekly emails, and I also got my two team members to join in on the fun as well.
    Keith Dawson
    Thank you for your newsletter, your explanations have very concise examples and I like it.
    Nicolas Decayeux
    Thanks A LOT for your great work!!! One of the few newsletters that I let pass!
    Martin Tillmann

    Want to level up your Vue skills?

    With over two million reads and 11,067 subscribers, you've come to the right place.

    Subscribe now to get exclusive insights and tips every week.