Exclusive tips every week

If you like Anthony's newsletter on Vue.js Developers, you'll enjoy this one, too.

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

    🔥 (237) Proxy Basics, Simplify Styling with Default Slot Wrappers, and Fine-grained Loading API in Nuxt

    Hey all!

    Not a lot new from me this week, but I've got some JS and Vue tips for you, like always.

    Enjoy your week!

    — Michael

    🔥 Proxy Basics

    Proxies are one of the strangest but most interesting parts of Javascript.

    It's a fancy wrapper that lets us create lightweight reactivity systems like in Vue, and so much more.

    Defining a proxy is simple. We just need to create a handler object, and then use it on an object:

    const handler = {
    get(target, prop, receiver) {
    return 'proxied!';
    },
    };
    const someObj = {
    hello: 'world',
    };
    const proxy = new Proxy(someObj, handler);
    console.log(proxy.hello) // proxied!

    It lets us intercept property accesses with the get "trap", so we could force any object to use our own logging method:

    const handler = {
    get(target, prop, receiver) {
    return () => {
    if (typeof target[prop] !== "function") return;
    // Force the method to use our own logging method
    const consoleLog = console.log;
    console.log = (msg) => {
    consoleLog(`[${prop}] ${msg}`);
    };
    target[prop]();
    console.log = consoleLog;
    };
    },
    };
    const someObj = {
    hello() {
    console.log('world');
    }
    }
    const proxy = new Proxy(someObj, handler);
    proxy.hello() // [hello] world

    We can also intercept when a property is set, prototypes are accessed, and many more things.

    You can find a complete list on MDN:

    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy

    🔥 Simplify Styling with Default Slot Wrappers

    When using slots in Vue, you might want to apply default styling to ensure consistent appearance across uses.

    Instead of requiring slot content to be wrapped every time, you can include the styling wrapper within the slot's component:

    <!-- StyledSlot.vue -->
    <template>
    <div class="default-styles">
    <slot />
    </div>
    </template>

    Now, when you use the StyledSlot component, the default styles are automatically applied without extra markup:

    <template>
    <StyledSlot>
    Slot content with default styling
    </StyledSlot>
    </template>

    It's a simple thing, but it makes a difference across a whole app.

    Be mindful of the type of slot you're creating—layout slots should not include styling, while content slots should.

    This practice prevents unnecessary CSS from complicating your layout and ensures a clean, consistent look for your components' content.

    🔥 Fine-grained Loading API in Nuxt

    In Nuxt we can get detailed information on how our page is loading with the useLoadingIndicator composable:

    const {
    progress,
    isLoading,
    } = useLoadingIndicator();
    console.log(`Loaded ${progress.value}%`); // 34%

    It’s used internally by the <NuxtLoadingIndicator> component, and can be triggered through the page:loading:start and page:loading:end hooks (if you’re writing a plugin).

    But we have lots of control over how the loading indicator operates:

    const {
    progress,
    isLoading,
    start, // Start from 0
    set, // Overwrite progress
    finish, // Finish and cleanup
    clear // Clean up all timers and reset
    } = useLoadingIndicator({
    duration: 1000, // Defaults to 2000
    throttle: 300, // Defaults to 200
    });

    We’re able to specifically set the duration, which is needed so we can calculate the progress as a percentage. The throttle value controls how quickly the progress value will update — useful if you have lots of interactions that you want to smooth out.

    The difference between finish and clear is important. While clear resets all internal timers, it doesn’t reset any values.

    The finish method is needed for that, and makes for more graceful UX. It sets the progress to 100, isLoading to true, and then waits half a second (500ms). After that, it will reset all values back to their initial state.

    📜 The Difference Between a Post Flush Watcher and nextTick in Vue

    Both are used to wait for the DOM to update, but they do it in different ways. We'll explore the differences between them and what it all means.

    Check it out here: The Difference Between a Post Flush Watcher and nextTick in Vue

    📜 Bulletproof Watchers in Vue

    Learn how to write bulletproof watchers in Vue, when to use onCleanup and onWatcherCleanup, and how to build reusable cleanup helpers.

    Check it out here: Bulletproof Watchers in Vue

    đź’¬ Creating complexity

    "The purpose of software engineering is to control complexity, not to create it." — Unkown

    đź§  Spaced-repetition: Global Properties

    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.

    It's possible to add global properties to your Vue app in both Vue 2 and Vue 3:

    // Vue 3
    const app = createApp({});
    app.config.globalProperties.$myGlobal = 'globalpropertiesftw';
    // Vue 2
    Vue.prototype.$myGlobal = 'globalpropertiesftw';

    I would recommend prefixing any global properties with a $.

    This helps prevent naming conflicts with other variables, and it's a standard convention that makes it easy to spot when a value is global.

    This global property can be accessed directly off of any component when using the Options API:

    computed: {
    getGlobalProperty() {
    return this.$myGlobal;
    },
    },

    Why can't this be used with the composition API?

    Because the composition API is designed to be context-free and has no access to this.

    Instead, you can create a simple composable to access your globals:

    <script setup>
    import useGlobals from './useGlobals';
    const { $myGlobal } = useGlobals();
    </script>
    // useGlobals.js
    export default () => ({
    $myGlobal: 'globalpropertiesftw',
    });

    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.