https://michaelnthiessen.com

Michael Thiessen - Vue TeacherMichael Thiessen is a Vue.js writer and speaker, and is the author of the Vue Tips Collection, Reusable Components and Clean Components.Michael Thiessen - Vue Teacher HomeArticlesCourses Michael ThiessenMenuHomeArticlesCourses 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.Subscribe👋Hey there! Welcome to my site. Take a look around and make yourself at home. — Michael ArticlesMost RecentReusable ComponentsClean Components ToolkitQuick TipsBeginnerAdvancedCommon ErrorsIntroduction to NuxtImg ComponentInvalid DateThe NuxtImg component is a powerful tool provided by Nuxt for optimizing images in your web application. It's designed to be a drop-in replacement for standard HTML img tags, offering a range of performance improvements with minimal configuration.Quickly Build Fullstack Vue Apps with DirectusAugust 2024At first, I was skeptical about Directus. I’ve never really been into low-code and no-code tools before.21 Nuxt Tips You Need to KnowAugust 2024I spent weeks scouring the Nuxt docs to uncover hidden gems — features you didn’t know it had, and ones that are simply easy to forget about.Create Beautiful PDFs with HTML, CSS, and MarkdownJuly 2024I built an easy-to-use tool that lets me use just HTML, CSS, and Markdown to create beautiful ebooks and PDFs.Dynamically Updating my Landing Page with Nuxt ContentJuly 2024I recently spent some time updating the landing page for Clean Components Toolkit so that it will automatically update the outline as I update the course content itself. This required me to do some fun stuff with Nuxt Content, so let’s not delay any further!I messed up my codebase (and the lessons I learned)July 2024I wrote this back in February, and then forgot it in my drafts folder. So here it is, I hope you enjoy reading it.Start with the Interface (and don't gold plate!)July 2024We want to first figure out how this new composable is going to be used. Once we do that, it’s much easier to figure out the implementation.Make Your Components Easier to Think AboutJune 2024I hate thinking. Well, actually, I *love* thinking, but only when I’m able to solve problems or make progress with it. But often our code gets in the way of this.Composition API vs. Options APIJune 2024Should you use the Composition API or stick with the Options API?12 Design Patterns in VueJune 2024Design patterns are incredibly useful in writing code that works well over the long run. They let us use proven solutions to problems that basically every single app has.Best Resources for Learning Vue in 2024May 2024In this guide, I've curated a selection of Vue 3 courses that I believe will really help both beginners and seasoned developers alike.3 Kinds of Props in VueFebruary 2024One of Vue's core features is the use of props. Props are how we pass data around in Vue, from parent to child components. But not all props are created equal.The 6 Levels of ReusabilityFebruary 2024We 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.SSR Safe Dynamic IDs in VueJanuary 2024Dynamic IDs are useful for testing, but can get tricky with SSR. Let's make a directive to do this easily, in both vanilla Vue and in Nuxt.Controlled Props PatternJanuary 2024There 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.Vue Error: Avoid Mutating a Prop DirectlyOctober 2023It'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.Using Conditional Class Bindings in VueOctober 2023It'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.How to Watch Deep Data Structures in Vue (Arrays and Objects)October 2023You 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 thisHow to Redirect in VueOctober 2023In 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.How to Set Focus on an Input in VueOctober 2023Every 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 Pass a Function as a Prop in VueAugust 2023While 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 Dynamically Add a Class Name in VueAugust 2023Being 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.How to Implement a Mouseover or Hover in VueAugust 2023In 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.The correct way to force Vue to re-render a componentAugust 2023Sometimes 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?How to Call a Method on Page Load in Vue 3 (with Reset)August 2023You'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.Building a (Totally) Unnecessary If/Else Component in VueJuly 2023I decided to do something a little weird, and maybe you’ll think I’ve gone (slightly) insane. I wanted to see what it would look like to make an `If...Else` component.The Extract Conditional Pattern in VueJune 2023An extremely common question I get asked all the time is, “how do you know when to split up a component?” I want to share a simple pattern with you that is basically fool-proof, and can be applied to lots of components with almost no thought.6 Reasons to Split up ComponentsJune 2023Take your components and break them up into smaller pieces. Or create new components and composables that let you encapsulate and reuse code in a better way. This is the simplest way to clean up your Vue app and make you and your team more productive.The Hidden Components PatternApril 2023There might be components hidden inside of your existing components. Finding them and extracting them will make your code simpler, and easier to use.Building a Custom Twitter Scheduler with Markdown SupportMarch 2023Wouldn't it be great if you could write with Markdown on Twitter, with code blocks and proper syntax highlighting? Well, I built myself a tool that does just that.Options Object PatternMarch 2023There are many patterns you can use to improve your composables. Using an object to pass parameters in is a very useful one that’s used all over the place — just take a look at the source of VueUse.Effective State ManagementMarch 2023How do we structure the state in our applications more effectively? It’s a question I’ve asked myself a lot over the years, because state is so central to app development and can be so difficult to wrangle.3 Ways to Create Inline ComposablesMarch 2023Composables are great, except that it seems we always need to create a new file for them. I want to explore some ways we can create inline composables — no need to create new files all over the place!Ref vs. Reactive — Which is Best?February 2023This has been a question on the mind of every Vue dev since the Composition API was first released: What’s the difference between `ref` and `reactive`, and which one is better?What is a Clean Component?September 2022Getting our code to work is great (and obviously necessary). But as professionals, we know that getting code to “work” is only 10% of the job. It also needs to work well.How to Fix the TypeScript Intellisense Template Error in VueAugust 2022I recently got this error while working on a Vue 3 project: TypeScript intellisense is disabled on template. No need to panic, just disable this Volar message exactly how it says.Nuxt 3 State Management: Pinia vs. useStateJune 2022If you’re a Nuxt developer, or plan to become one with Nuxt 3, you might be wondering what to use for state management.Everything About SuspenseJune 2022If you’re a Nuxt developer, or plan to become one with Nuxt 3, you might be wondering what to use for state management.Coding Better Composables (Series)May 2022Composables are, by far, the best way to organize business logic in your Vue 3 app. They let you extract small pieces of logic into functions that you can easily reuse repeatedly. I've teamed up with Vue Mastery to give you an in-depth series on composables.Why you should be using Vue 3's Composition APIAugust 2021In this article you'll see exactly why you should learn to use the composition API by comparing the old way to the new way. The examples also start out simple and get more complex, so you can see that the composition API isn't really all that different from what you're used to.Multiple Components in One FileAugust 2021Every now and then you just need a small component, one that's not worth an entirely new file.Shorthand for Named SlotsJuly 2021Named slots also have a shorthand syntax, one that's much nicer to look at.A Simpler Way to Pass Lots of PropsJuly 2021Instead of passing in tons of props to a component individually, you can take a whole object and have all of its properties automatically bound to the component as props.Watch Anything in Your ComponentJuly 2021It took me a very long time to realize this, but anything in your component that is reactive can be watched.How to Make a Variable Created Outside of Vue ReactiveJuly 2021If you get a variable from outside of Vue, it's nice to be able to make it reactive if you need to.Overriding Child Component Styles — The Right WayJune 2021Scoped CSS is fantastic for keeping things tidy, but sometimes you need to override a child component's styles.How to Get Rid of Extra Template TagsJune 2021Scoped slots are lots of fun, but in order to use them you have to use a lot of `template` tags, too.When Should You Use v-if?June 2021Instead of using `v-if`, it's sometimes more performant to use `v-show` instead.A Better Way to Handle Errors (and Warnings)June 2021You can provide a custom handler for errors and warnings in Vue.Use Quotes to Watch Nested ValuesJune 2021You may not have known this, but you can easily watch nested values directly, just by using quotes.Stealing Prop TypesJune 2021Often I find that I'm copying prop types from a child component, just to use them in a parent component. But I've discovered that stealing those prop types is much better than just copying them.Default Content and Extension PointsMay 2021Slots in Vue can have default content, but my favourite use is to create extension points.Don't Override Component CSSMay 2021It can be really tempting to quickly modify a component's CSS from outside of the component. If all you need is a slight modification, it seems harmless — but it's not.Debugging Guide: Why Your Vue Component Isn't Updating (and how to fix it)May 2021If you've got a Vue component that won't update the way you expect it to, this debugging guide will help you to quickly identify and fix the problem.Hide an Empty Slot with No ContentMay 2021First I'll show you how, then we'll get into why you'd want to hide slots.Component MetadataMay 2021Not every bit of info you add to a component is state. Sometimes you need to add some metadata that gives other components more information.Tips to Supercharge Your Slots (Named, Scoped, and Dynamic)January 2021Slots allow you to write very powerful, expressive components. In this article we'll cover six of those patterns, so that you can take your slot skills to the next level.Double Your Impact in 12 MonthsOctober 2020It's a bold statement to make. But really, it's what we're all after, isn't it? To increase our impact, to make more change, to achieve more and get more done with less.Understanding Scoped SlotsOctober 2020Inversion uses scoped slots heavily, so in this lesson we'll be diving into scoped slots to understand how they work, but at a deeper level. You'll see how thinking about slots as functions can make it much easier to see what's really going on.Slots > PropsOctober 2020Slots are better than props, but why is that the case? This video covers the inherent limitations of props, why slots are better, and why sometimes you want to actually avoid reusability.Using Configuration for ReusabilitySeptember 2020Configuration is all about using props to allow for variations in how a component works (you're likely doing some form of this already)Passing Data Between Child ComponentsAugust 2020Being 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 2020There 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 SlotsAugust 2020One 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 SlotJuly 2020You know how to pass data into a slot by using scoped slots, but how do you communicate back?Best Practices vs. OpinionJuly 2020While 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.Adding Keyboard Accessibility (Video Series)June 2020Being 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-forMay 2020I 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 FunctionsMay 2020Underneath 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 TechniqueMay 2020There 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.Lonely ChildrenMay 2020Control 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.Understanding the :key Attribute in VueMay 2020One 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.Thinking in treesApril 2020We 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 WatcherApril 2020Watchers 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 VuexApril 2020What 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 ComponentsMarch 2020How 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 RefactoringMarch 2020I 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.When to Use WatchersMarch 2020Watchers 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 ManagementFebruary 2020Understanding 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 ComponentsFebruary 2020Writing 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 FrameworkJanuary 2020If 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 betterCleaning Up Control FlowNovember 2019In 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 VueNovember 2019I'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 RepetitionNovember 2019Just 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 SurgeryNovember 2019Computed 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.4 Levels of Vue ScopeOctober 2019Vue 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 InjectionSeptember 2019You'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 ThingsAugust 2019Learning 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 2019I 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 2019By 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 2019Is 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 ArticlesJune 2019I 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 VueJune 2019If 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.The Paradox of Abstraction: When Good Code is Bad CodeMay 2019I 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 Solve "Unknown Custom Element" in VueMay 2019You've gotten this terrible error, Unknown custom element - 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 InterfaceApril 2019Getting 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 VueMarch 2019Are 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 1January 2019There 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 VueJanuary 2019When 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.Property or Method is Not DefinedNovember 2018Chances 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 2018Computed 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.Props Versus Data in Vue: The Subtle Differences You Need to KnowOctober 2018Vue 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?Renderless Components: 5 Wild ExperimentsSeptember 2018I'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 VueSeptember 2018You 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. Load more Courses Upgrade your Vue skillset with these specially made courses Nuxt Tips Collection 117 concise tipsPDF - Emails Master Nuxt in only 5 minutes a day with this beautifully-designed book. $70 USDCheck it out → CleanComponents Toolkit Reference toolkitAll experience levels A toolkit of techniques, principles, and patterns for building great Vue components. $297 USD Check it out → Vue Tips Collection 2 118 concise tipsHardcover - PDF Master Vue in only 5 minutes a day with this beautifully-designed hardcover book. $70 USDCheck it out → ReusableComponents 7 modulesIntermediate - Expert Master the art of writing highly reusable Vue — and make the most of your components. $197 USDCheck it out → CleanComponents This course is no longer for sale. Log in → 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.Subscribe

en

en

1729271041

https://michaelnthiessen.com

Edite sit ou a?

kisa wap fe?