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

    🔥 (#158) Deja Vue

    Hey!

    You can now listen to the trailer for our new podcast, Deja Vue.

    Me and Alexander Lichter (Nuxt core team) have joined forces to create a podcast all about Vue and Nuxt.

    We'll be releasing weekly, and topics will include:

    • New releases in the ecosystem
    • Deep dives on specific features or parts of Vue and Nuxt
    • Guests, including well-known faces (and voices) as well as those who aren't as well known but have something interesting to say

    We're still figuring this thing out, so any feedback at all is helpful. Topic ideas, format ideas, or just tips on how to make it a better listening experience are all welcome!

    Here are all the links:

    Enjoy the podcast and the tips!

    — Michael

    🔥 Reactive SVG components

    SVGs can be reactive components, too.

    After all, they're HTML elements just like div, span, and button.

    Here's an SVG component that has a prop to change it's fill colour:

    <template>
    <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <circle cx="50" cy="50" r="50" :fill="color" />
    </svg>
    </template>
    <script setup lang="ts">
    defineProps<{
    color: string
    }>();
    </script>

    I'm sure you can build some pretty wild things if you dig into different SVG elements and attributes.

    Scoped slots and SVGs? Why not...

    Here's a demo if you want to see this example in action.

    🔥 A simpler way to pass lots of props

    Instead of passing in tons of props to a component individually:

    <template>
    <User
    :name="user.name"
    :profile="user.profile"
    :twitter="user.twitter"
    :location="user.location"
    :framework="user.framework === 'Vue' ? 'Number one' : 'Number two'"
    />
    </template>

    You can take a whole object and have all of its properties automatically bound to the component as props:

    <template>
    <User v-bind="user"/>
    </template>
    <script setup>
    import User from './User.vue';
    const user = {
    name: 'Anakin',
    profile: 'ani-profile.jpg',
    twitter: '@TatooineJedi',
    location: 'Undisclosed',
    framework: 'Vue',
    };
    </script>

    This also works with v-on if you have a lot of event handlers:

    <template>
    <User v-on="userEventHandlers"/>
    </template>
    <script setup>
    import User from './User.vue';
    const userEventHandlers = {
    updateName(newName) {
    // ...
    },
    deleteUser() {
    // ...
    },
    addFriend(friend) {
    // ...
    }
    };
    </script>

    Here, the name of each method needs to match the name of the event. eg. updateName is called to handle the update-name event.

    🔥 From Options to Composition — The Easy Way

    You can use reactive to make the switch from the Options API a little easier:

    // Options API
    export default {
    data() {
    username: 'Michael',
    access: 'superuser',
    favouriteColour: 'blue',
    },
    methods: {
    updateUsername(username) {
    this.username = username;
    },
    }
    };

    We can get this working using the Composition API by copying and pasting everything over using reactive:

    // Composition API
    setup() {
    // Copy from data()
    const state = reactive({
    username: 'Michael',
    access: 'superuser',
    favouriteColour: 'blue',
    });
    // Copy from methods
    updateUsername(username) {
    state.username = username;
    }
    // Use toRefs so we can access values directly
    return {
    updateUsername,
    ...toRefs(state),
    }
    }

    We also need to make sure we change thisstate when accessing reactive values, and remove it entirely if we need to access updateUsername.

    Now that it’s working, it’s much easier to continue refactoring using ref if you want to — or just stick with reactive.

    📜 Prisma with Nuxt 3: Creating the Prisma Schema (2 of 5)

    Trying to manage database schemas alongside your Nuxt app types can be a challenge.

    But with Prisma, most of these problems go away.

    It handles all of the boilerplate and coordination, so you just write one single schema that’s used in your database and in your TypeScript app.

    In this article I show you how to create your Prisma schema.

    Check it out here: Prisma with Nuxt 3: Creating the Prisma Schema (2 of 5)

    💬 Hardly Ever Happens

    "“That hardly ever happens” is another way of saying “it happens”." — Douglas Crockford

    🧠 Spaced-repetition: Creating an If...Else Component

    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.

    Ever thought about making an If...Else component in Vue, despite having v-if, v-else, and v-else-if?

    Here's a quirky experiment that explores this idea:

    <If :val="mainCondition">
    <template #true>Render if true</template>
    <Else :if="false">Else if condition</Else>
    <template #false>Otherwise render this</template>
    </If>

    This setup uses Compound Components, default and named slots, and even render functions to achieve a flexible If...Else logic.

    The If component checks a condition and decides which slot (true, false, or Else) to render.

    The Else component — a Compound Component — allows for an else if condition.

    I have a detailed write up about this component on my blog.

    Here's a simplified version for a cleaner API:

    <If :val="condition">
    <True>Truth</True>
    <Else :if="elseCondition">Else slot</Else>
    <False> What up false branch! </False>
    </If>

    This experiment is a fun way to dive deep into Vue's features like slots, reactivity, and component communication. While it might not replace the built-in directives, it's a great learning exercise and could inspire other creative component designs.

    Check out the demo and maybe even try implementing your version: Vue If...Else Component Demo

    Remember — experimenting with "weird" ideas is a fantastic way to deepen your understanding of Vue!



    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.