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

    🔥 (232) Using useRequestHeader, Reusing Code, and Global Properties

    Hey!

    Tomorrow is the last day of the Advanced Reactivity course launch and the 35% off discount. If you were hoping to pick it up, don't forget to check it out!

    Get Advanced Reactivity here

    Otherwise, I hope you enjoy the tips and articles I've got for you in this newsletter.

    Have a great week,

    — Michael

    🔥 Using useRequestHeader

    Grabbing a single header from the request couldn’t be easier in Nuxt:

    const contentType = useRequestHeader('content-type');

    This is super handy in middleware and server routes for checking authentication or any number of things.

    If you’re in the browser though, it will return undefined.

    This is an abstraction of useRequestHeaders, since there are a lot of times where you need just one header.

    See the docs for more info.

    🔥 Reusing Code and Knowledge

    Don’t Repeat Yourself — an acronym that many know but many don’t correctly understand.

    DRY isn’t actually about code, it’s about the knowledge and decisions that are contained in the code. Too often we are just pattern matching on syntax, and that leads us to bad abstractions that should never exist.

    Here are some ways we can fix that:

    • Don’t Repeat Yourself (DRY) — Use components and composables to create reusable views and logic. Doing this well is an entire topic all on it’s own, which is why I created a whole course on it.
    • Optimize for Change — Most of our time is spent modifying existing code, so it pays to make it easy. If code is new or likely to change, don’t worry about abstracting it into a new component yet — duplication is welcome here.
    • Syntax vs. Knowledge — When removing duplication or “drying up” your code, make sure you’re encapsulating knowledge and not syntax. Just because code looks the same doesn’t mean it is the same.

    🔥 Global Properties

    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',
    });

    📜 Adding Drag and Drop (video)

    In this video from LearnVue, we see how easy it can be to add a powerful drag and drop system in to your app.

    Check it out here: Adding Drag and Drop (video)

    📜 Configuration in Nuxt: runtimeConfig vs. appConfig

    Nuxt provides powerful configuration options, allowing you to adapt your application to different use cases.

    The two key parts of Nuxt's configuration system are runtimeConfig and appConfig.

    This article will explain the purpose and differences between these two options and show you how to use them.

    Check it out here: Configuration in Nuxt: runtimeConfig vs. appConfig

    đź’¬ Gall's Law

    "A complex system that works is invariably found to have evolved from a simple system that worked. The inverse proposition also appears to be true: A complex system designed from scratch never works and cannot be made to work. You have to start over, beginning with a working simple system." — John Gall

    đź§  Spaced-repetition: Default Content with Nested Slots

    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.

    If you have multiple levels of nested slots, it's possible to have defaults at each level:

    <!-- Parent.vue -->
    <template>
    <Child>
    <slot>
    We're in the Parent!
    </slot>
    </Child>
    </template>
    <!-- Child.vue -->
    <template>
    <div>
    <slot>
    We're in the Child!
    </slot>
    </div>
    </template>

    The slot content provided at the highest point in the hierarchy will override everything below it.

    If we render Parent, it will always display We're in the Parent. But if we render just the Child component, we get We're in the Child!.

    And if the component rendering the Parent component provides slot content, that will take precedence over everything:

    <!-- Grandparent.vue -->
    <template>
    <Parent>
    Haha this content rules them all!
    </Parent>
    </template>

    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.