Exclusive tips every week

Join 13,567+ 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

    🔥 (219) Mocking Nuxt Components, Render Functions, and More

    Read this on my blog

    Hey there!

    As always, I've got some tips for you this week, plus an announcement:

    If you're already familiar with Nuxt, I've got great news for you!

    We've structured Mastering Nuxt: Full Stack Unleashed so that it's easy to jump into the advanced topics later on in the course (I catch you up with what we've been building throughout).

    You can watch that one for free here to see what we've been up to.

    Yesterday we released the first set of videos in the advanced second half, focusing on advanced topics for server routes:

    • Configure Persistent Storage in Nuxt with Unstorage
    • Implement Server Middleware for Global Request Handling

    And since we're still releasing lessons, you can get the course for an early access discount:

    Get Mastering Nuxt: Full Stack Unleashed here

    🔥 Mock Nuxt Components When Testing

    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

    🔥 Render Functions and Custom Component Options

    Vue's render functions and custom component options offer a powerful way to dynamically generate and control the rendering of components.

    For instance, you can conditionally render child components or slots based on certain criteria.

    Here's a basic render function that conditionally renders slots:

    return () => {
    const slots = useSlots();
    const children = [];
    if (props.val && slots.true) {
    children.push(slots.true());
    } else if (!props.val && slots.false) {
    children.push(slots.false());
    }
    return children;
    };

    Custom component options can be used to tag components with specific properties that can be checked during rendering. This is useful when you have a set of components and you want to treat some of them differently based on their role or type.

    For example, you can define a custom option in a child component:

    export default {
    props: ['if'],
    conditional: true, // Custom component option
    setup(props) {
    // ...
    },
    };

    And then in the parent component's render function, you can filter child components based on this custom option:

    const slots = useSlots();
    const conditionalComponents = slots
    .default()
    .filter((el) => el.type.conditional);
    const children = [conditionalComponents];

    This pattern is particularly useful when creating compound components that need to communicate and share state in a tightly coupled manner. It allows for a clean and declarative approach to rendering while maintaining flexibility and control over the component tree.

    🔥 Wrapping Non-Reactive Code

    You don't always have to write a full-blown composable:

    const set = reactive(new Set());
    const values = computed(() => Array.from(set.values()));
    set.add('hello');
    set.add('world');
    let counter = 1;
    setInterval(() => {
    set.add(counter);
    counter += 1;
    }, 1000);

    Because Vue’s reactivity system uses proxies, this is a really easy way to take an existing object and spice it up with some reactivity.

    You can, of course, apply this to any other libraries that aren’t reactive.

    Though you may need to watch out for edge cases here and there.

    Check out a demo of this here: https://stackblitz.com/edit/vue-pmspzc?file=src%2FApp.vue

    📜 Quickly Build Fullstack Vue Apps with Directus

    Directus is a powerful headless CMS that can be used to quickly build fullstack Vue apps.

    In this article, we'll go over how I used Directus and Nuxt to build a survey app — all without writing a single line of backend code.

    Check it out here: Quickly Build Fullstack Vue Apps with Directus

    📅 Upcoming Events

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

    MadVue 2025 — (May 29, 2025)

    It's time to get together in Madrid. Join for a full day of talks, activities, and networking with the Vue.js community and ecosystem.

    Check it out here

    Frontend Nation 2025 — (June 3, 2025 to June 5, 2025)

    The epic online gathering for frontend developers! I'll be giving a talk where I do a whirlwind tour of the best features of Vue, while building an app from scratch.

    Check it out here

    💬 Two Types of Languages

    "There are only two kinds of languages: the ones people complain about and the ones nobody uses." — Bjarne Stroustrup

    🧠 Spaced-repetition: Component Metadata

    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.

    Not every bit of info you add to a component is state. For example, sometimes, you need to add metadata that gives other components more information.

    For example, if you're building a bunch of different widgets for an analytics dashboard like Google Analytics or Stripe.

    If you want the layout to know how many columns each widget should take up, you can add that directly on the component as metadata:

    <script setup>
    defineOptions({
    columns: 3,
    });
    </script>

    Or if you're using the Options API:

    export default {
    name: 'LiveUsersWidget',
    // Just add it as an extra property
    columns: 3,
    props: {
    // ...
    },
    data() {
    return {
    //...
    };
    },
    };

    You'll find this metadata as a property on the component:

    import LiveUsersWidget from './LiveUsersWidget.vue';
    const { columns } = LiveUsersWidget;

    With the Composition API we can't access this value directly, because there's no concept of a "current instance". Instead, we can make our value a constant:

    <script setup>
    const columns = 3;
    defineOptions({
    columns,
    });
    </script>

    But this value cannot change, because defineOptions is a compiler macro and the value is used at compile time.

    If you're using the Options API you can access the metadata from within the component through the special $options property:

    export default {
    name: 'LiveUsersWidget',
    columns: 3,
    created() {
    // `$options` contains all the metadata for a component
    console.log(`Using ${this.$options.columns} columns`);
    },
    };

    Just keep in mind that this metadata is the same for each component instance and is not reactive.

    Other uses for this include (but are not limited to):

    • Keeping version numbers for individual components
    • Custom flags for build tools to treat components differently
    • Adding custom features to components beyond computed props, data, watchers, etc.
    • and many more I can't think of!

    I used this technique to build my Totally Unnecessary If/Else Component if you want to see it in action.

    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:

    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.