🎉Level up your Vue skills with my course Clean Components! Get it now! 🎉

Most Popular

The 6 Levels of Reusability

June 2020

We all want to write less code, but get more done. To make this happen, we build our components so they can be reused more than just once.

The Underdog Framework

January 2020

If React is so much more popular than Vue, wouldn't it be better to just stick with that? There are 3 specific things here I'd like to cover: 1. Growth of the framework itself (innovation) 2. Career opportunities 3. Ease of learning/getting better

The Most Important Feature in Vue

November 2019

I've said it before and I'll say it again: Computed properties are the most important feature in Vue. Sure, scoped slots let you create some nice abstractions and watchers are useful too. But I don't think anything comes close to how valuable computed props are.

Get exclusive VueJS content

Join 7,007 Vue developers and get exclusive tips and tricks straight to your inbox, every single week.

  • Insights that will make you a better Vue developer
  • Exclusive content that you can't get anywhere else
  • No spam. Only amazing content.

    Most Recent

    Passing Data Between Child Components

    August 2020

    Being able to pass data around your application is extremely important. It seems that child to child data sharing is where most of the confusion and frustration lay.

    What are Template Props?

    August 2020

    There are different kinds of props that we use in Vue, each with their own unique characteristics. In this article I'm going to explore what template props are, why they're useful, and what we can do with them.

    Reusing Logic with Scoped Slots

    August 2020

    One of my favourite things about them is how they let you reuse logic between components — but in a very unique way.

    How to Emit Data from a Slot

    July 2020

    You know how to pass data into a slot by using scoped slots, but how do you communicate back?

    Best Practices vs. Opinion

    July 2020

    While there are certain fundamental principles of software development that are extremely valuable to understand, most "best practices" are just (useless) opinions that can be safely ignored.

    The 6 Levels of Reusability

    June 2020

    We all want to write less code, but get more done. To make this happen, we build our components so they can be reused more than just once.

    Adding Keyboard Accessibility (Video Series)

    June 2020

    Being able to use the keyboard with your application is necessary for accessibility. In this video series I show how to add keyboard support by managing the focus of the app.

    Destructuring in a v-for

    May 2020

    I recently discovered that you can destructure in a v-for. It turns out not many of you knew this either, as this ended up being one of my most popular tweets:

    Components Are Functions

    May 2020

    Underneath it all, components are just functions that return some HTML. It's a huge simplification, and if you've ever looked at the complexity of the Vue codebase you know this isn't actually true. But, fundamentally, this is what Vue is doing for us — plus a million other amazing things.

    The Key Changing Technique

    May 2020

    There are times where you'll have to force Vue to re-render a component. Although these edge cases where Vue doesn't automatically update are rare, it's useful to know how to fix this issue when it comes up.

    Understanding the Key Attribute

    May 2020

    One of the most confusing attributes in Vue is `key`. It's not a directive like `v-for`. It's not a prop, even though it looks exactly like one. It has nothing to do with slots, lifecycle hooks, computed props or watchers.

    Lonely Children

    May 2020

    Control flow directives, like `v-if` and `v-for`, can create lots of nested code that's difficult to read. I've picked up this trick that makes it simple to transform these nightmares into fairy tales.

    Thinking in trees

    April 2020

    We often think about the relationships between our components as a tree. The DOM is also represented this way, with parents and children and siblings and ancestors. I've noticed that many other problems can be transformed to look like trees, too.

    Example of Using a Watcher

    April 2020

    Watchers can be an incredibly powerful tool. But once you know when to use them, you still have to figure out how. So I thought I'd show you an example from a project I've been working on.

    State Management Without Vuex

    April 2020

    What if you wanted to manage state, but you didn't want to use Vuex? Don't get me wrong, Vuex is a great tool. But it's not ideal for every use case.

    How I Think About Splitting Up Components

    March 2020

    How do you open up a package from Amazon? Do you start by jabbing your finger in the side to create a hole, and then tear open from there? Maybe you throw it against the wall until the box disintegrates, leaving behind your prize.

    The Art of Refactoring

    March 2020

    I have a problem. I drink waaaay too much tea. But that's not the real issue. Not really. After I'm finished steeping my tea to perfection, I forget to clean things up. Dirty mugs, tea stained spoons, and tea pots with tea leaves still in them.

    Controlled Props Pattern

    March 2020

    There are a few instances where you want to be able to override the internal state of a component and force it open from the parent. The controlled props pattern is designed for exactly this situation.

    When to Use Watchers

    March 2020

    Watchers are an often misunderstood feature in Vue. Some developers use them all the time. Some never use them. And how exactly are they different from computed props and methods?

    The First Principle of State Management

    February 2020

    Understanding how to use Vuex is great and all. But I want to dig deeper than that. You see, there are some fundamental principles for how state works. In any frontend framework.

    3 Ways to Clean Up Components

    February 2020

    Writing maintainable code is hard. It's hard to learn, and even harder to teach. Mostly, it's won through hard work and experience. But there are a few guidelines I've learned over the years that can get you there quicker.

    The Underdog Framework

    January 2020

    If React is so much more popular than Vue, wouldn't it be better to just stick with that? There are 3 specific things here I'd like to cover: 1. Growth of the framework itself (innovation) 2. Career opportunities 3. Ease of learning/getting better

    Cleaning Up Control Flow

    November 2019

    In Vue we have some directives that help us to control what gets rendered to the page, v-for and v-if. We call these things control flow because they control the flow of how code is executed. In Vue, they control the flow of what gets rendered to the page.

    The Most Important Feature in Vue

    November 2019

    I've said it before and I'll say it again: Computed properties are the most important feature in Vue. Sure, scoped slots let you create some nice abstractions and watchers are useful too. But I don't think anything comes close to how valuable computed props are.

    Reducing Redundant Repetition

    November 2019

    Just because the interface repeats, it doesn't mean your code needs to be repetitive as well. This is exactly why we invented computers — to do the tedious, boring things for us!

    Side Effect Surgery

    November 2019

    Computed properties in Vue should never have side effects. But it's really easy to accidentally add them in. A side effect is the modification of state, whether it's component state or global state.

    How to Redirect in Vue

    October 2019

    In this short article we'll cover how to redirect to internal and external pages, if you're using Vue Router and if you're just using plain Vue.

    4 Levels of Vue Scope

    October 2019

    Vue comes with it's own unique levels of scope, in addition to what Javascript has already. Scope controls what variables can be used and where. Understanding the differences between the levels of scope that Vue gives you will help you to write clearer code.

    Provide/Inject Have Nothing to Do With Dependency Injection

    September 2019

    You've probably learned that provide and inject allow you to do dependency injection. But they have nothing to do with it, and I'll show you why.

    How to Learn New Things

    August 2019

    Learning is a topic I've been focused on for nearly a decade now, and in this article I'm going to share my thoughts on the subject and how I go about learning in my own life.

    How to Use Nested Slots in Vue (including scoped slots)

    August 2019

    I recently figured out how to implement nested slots recursively, including how to do this with scoped slots.

    How to Use Props in Vue: The Ultimate Guide (with Examples)

    July 2019

    By the time you're finished reading this guide, you'll know everything you need to know about props in order to be a super productive Vue developer.

    Advanced Vue: Controlling Parent Slots (Case Study)

    July 2019

    Is there a way to populate a parent's slot from a child component? It's a thorny Vue architecture problem, but also a very interesting one.

    Top 8 Websites for Stellar Vue Articles

    June 2019

    I spend quite a bit of time scouring the web for great content on Vue. Over time I've found myself going to back to a few places over and over again. Many of these you've probably heard of, but hopefully you'll find a few gems in this list.

    Loop Over a Range in Vue

    June 2019

    If you want to loop over a range in your Vue template, it's not too complicated. The v-for directive in Vue let's us loop over an array. But it also let's us loop over a range.

    Using Conditional Class Bindings in Vue

    June 2019

    It's sort of cool to add a class to a component. But the real fun begins when you can conditionally bind classes — turning them on and off as you wish.

    The Paradox of Abstraction: When Good Code is Bad Code

    May 2019

    I felt like a freaking genius. My code had transcended bits and bytes. Now it was truly a work of art, worthy of awards and accolades... or so I thought.

    How to Set Focus on an Input in Vue

    May 2019

    Every now and then you'll need to programmatically focus on an input (or other element). This is often needed for accessibility, or to make the app more convenient to use.

    How to Solve "Unknown Custom Element" in Vue

    May 2019

    You've gotten this terrible error, Unknown custom element <CustomComponent> - did you register the component correctly? Don't worry, I'll show you exactly how to fix this.

    Why You Need to Start With the Perfect Interface

    April 2019

    Getting your component interface right is _the most_ important thing. And you can't leave it for later. You have to get it right from the very start. But why is this so important?

    How to Unlock the Full Potential of Prop Types in Vue

    March 2019

    Are you using prop types to their full potential? I know I'm not. It's a part of Vue that's just glossed over. So I collected these 5 tips on getting the most out of prop types.

    Rebuilding My Blog in Vue: Part 1

    January 2019

    There are lots of you that write blogs, and maybe you've been thinking about switching to a Vue-based platform. Maybe you haven't even gotten started yet. This is the first article in a series documenting my progress and my thoughts as I rebuild my blog in Vue.

    26 Time Saving Tips for Vue

    January 2019

    When writing Vue applications, we waste our time by doing things the wrong way, when we could have been doing it the right way from the start. That's why I put together this list of 26 articles that will help you save time, by teaching you how to avoid some common time-wasters.

    How to Dynamically Add a Class Name in Vue

    December 2018

    Being able to add a dynamic class name to your component is really powerful. Adding a dynamic class name is as simple as adding the prop ':class' to your component. Of course, there is a lot more we can do here with dynamic classes in Vue.

    Vue Error: Avoid Mutating a Prop Directly

    November 2018

    It's a confusing error: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. I'll show you a simple pattern you can use to fix this error - and never see it again.

    How to Pass a Function as a Prop in Vue

    November 2018

    While you can pass a function as a prop, this is almost always a bad idea. Instead, there is probably a feature of Vue that is designed exactly to solve your problem. If you keep reading you'll see what I mean.

    How to Call a Vue Method on Page Load

    November 2018

    You'll want to use the 'mounted' lifecycle hook so that you can run code as soon as your component is mounted to the DOM. From this lifecycle hook you can fetch data, manipulate the DOM, or do anything else you might need in order to initialize your component.

    How to Implement a Mouseover or Hover in Vue

    November 2018

    In CSS it's pretty easy to change things on 'hover'. In Vue it gets a little trickier. In this short article you'll learn -- How to implement a hover effect in Vue, how to show an element on mouseover, and how to dynamically update classes with a mouseover.

    Property or Method is Not Defined

    November 2018

    Chances are if you've been developing with Vue for any amount of time, you've gotten this error: Property or method prop is not defined. Most of the time this error is because you misspelled a variable name somewhere. But there are other causes as well.

    Computed Props and Watchers — What's the Difference?

    October 2018

    Computed properties and watchers are two of the most fundamental concepts in Vue. In this article you'll learn: what a watcher is and what a computed prop is, common use cases for both, the differences and similarities between them, and how to know which one to use.

    How to Watch Deep Data Structures in Vue (Arrays and Objects)

    October 2018

    You have an array or an object as a prop, and you want your app to do something whenever that data changes. So you create a watcher for that property, but Vue doesn't seem to fire the watcher when the nested data changes. Here's how you solve this

    Props Versus Data in Vue: The Subtle Differences You Need to Know

    October 2018

    Vue comes with two different ways of storing variables, props and data. These can be confusing at first, since they seem like they do similar things, and it's not clear when to use one vs the other. So what's the difference between props and data?

    React vs Vue: Which is growing faster?

    October 2018

    Which is better, React or Vue? We need to look at the numbers to see not what people think, but what people are doing. The metrics we'll be looking at are Hacker News popularity, NPM downloads, Github stars, Google Trends, and Reddit subscribers.

    Renderless Components: 5 Wild Experiments

    September 2018

    I've been spending the last several weeks experimenting with the different things that we can do with renderless components. I've been pushing the limits pretty far, going past the edges of what Vue is intended to do. Along the way I've discovered a few neat things that I'd like to share with you!

    How to fix "this is undefined" in Vue

    September 2018

    You get an error that says: 'this is undefined'. Don't worry, you're not alone -- I've run into this issue countless times, and I'll show you just how to solve it.

    The correct way to force Vue to re-render a component

    September 2018

    Sometimes Vue's reactivity system isn't enough, and you just need to re-render a component. Or maybe you just want to blow away the current DOM and start over. So how do you get Vue to re-render a component the right way?

    Get exclusive VueJS content

    Join 7,007 Vue developers and get exclusive tips and tricks straight to your inbox, every single week.

    • Insights that will make you a better Vue developer
    • Exclusive content that you can't get anywhere else
    • No spam. Only amazing content.

      I'm Michael Thiessen and I write about all things VueJS here. More about me.