Join 11,067 other Vue devs and get exclusive tips and insights delivered straight to your inbox, every week.
👋Hey friend! I work hard to send you amazing stuff each week.
— Michael
Hey!
A lot of stuff this week, but I'll try to keep it short.
Last week at VueConf Toronto was amazing, as always. Thanks to everyone who attended and said hello!
Quick reminder: my 50% off Black Friday sale ends today, so make sure to use the BLACKFRIDAY
code soon. Go to my courses page to get started.
If you've been following me a while, you know how much I love patterns!
So, I put together a design patterns email course for you, completely free. You can get it by going here.
The State of Vue.js survey also dropped this week. If you haven't taken it yet, please do! It only takes a few minutes and helps everyone in the community understand more about what you're doing with Vue and how we can make things better.
You can take it here.
I've also been working on a Composable Patterns course!
For years I've been slowly acquiring a collection of patterns and techniques that I've found useful in my work.
Now, it's time for me to share them with you.
Have a fantastic week!
— Michael
You can store (a bit of) state in the URL, allowing you to jump right into a specific state on the page.
For example, you can load a page with a date range filter already selected:
someurl.com/edit?date-range=last-week
This is great for the parts of your app where users may share lots of links, for a server-rendered app, or for communicating more information between two separate apps than a regular link provides typically.
You can store filters, search values, whether a modal is open or closed, or where in a list we've scrolled to — perfect for infinite pagination.
Grabbing the query using vue-router
works like this (this will work on most Vue frameworks like Nuxt and Vuepress too):
// Composition APIconst dateRange = useRoute().query.dateRange;// Options APIconst dateRange = this.$route.query.dateRange;
To change it we use the RouterLink
component and update the query
:
<RouterLink :to="{query: {dateRange: newDateRange}}">
It took me way too long to figure this one out, but here it is:
// Doesn't change when route changesconst route = useRoute();// Changes when route changesconst path = useRoute().path;
If we need the full route object in a reactive way, we can do this:
// Doesn't change when route changesconst route = useRoute();// Changes when route changesconst route = useRouter().currentRoute.value;
With the Options API you can use $route
and $router
to get objects that update whenever the route changes.
Since Nuxt uses Vue Router internally, this works equally well in Nuxt and vanilla Vue apps.
Here's a demo to see this for yourself: Demo
Looking at a component itself is the primary way that we can figure out when and how to refactor it. But we can also look at how the component is used for some clues.
Specifically, we’re looking to see if there are subsets of this component where those features are only used together.
This suggests that there may be more than one component hidden inside of this one.
Let's say we have the following component:
<template><div v-if="conditional"><!-- ... --></div><div v-else><!-- ... --></div></template>
Because the v-if
is at the root, we know that it's not actually adding any value to this component.
Instead, we can simplify by splitting into one component for each branch of our conditional:
<template><ComponentWhereConditionalIsTrue /><ComponentWhereConditionalIsFalse /></template>
Now, we don't need to hard-code the conditional
prop — we can just use the more descriptive and specific component.
For another example, if prop1
and prop2
are only ever used together, but never with prop3
and prop4
, it could mean that the functionality relying on prop1
and prop2
should be separated from the rest of the component.
In this illustration, the usage of MyComponent
always uses two distinct sets of props, prop1
and prop2
, or prop3
and prop4
:
<MyComponent prop-1="someValue" prop-2="anotherValue" /><MyComponent prop-1="hello" prop-2="world" /><MyComponent :prop-3="34" prop-4 />
In our theoretical refactoring, we would split the component to work like this:
<FirstComponent prop-1="someValue" prop-2="anotherValue" /><FirstComponent prop-1="hello" prop-2="world" /><SecondComponent :prop-3="34" prop-4 />
Here are the steps to do this refactoring:
Learn more about this pattern in the Clean Components Toolkit.
All of you have seen users do weird things with your application and running into strange scenarios — who can't relate to this?
For this and many other reasons, the right way of error handling is important in you application. Join Michael and Alex on a discussion of the different ways one can handle errors in their application.
That includes not always showing an error page, but also handling errors request-based or component-based!
On that note, error messages and how to write decent ones that are helpful for the users are discussed, as well as how components like NuxtErrorBoundary work under the hood.
Watch on YouTube or listen on your favorite podcast platform.
Chapters:
In case you missed them:
An 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.
Check it out here: The Extract Conditional Pattern in Vue
In this article I explore several features of Nuxt that I think are the most interesting.
This will give you a good overview of why Nuxt is so great to work with.
Check it out here: My Favourite Nuxt Features
Here are some upcoming events you might be interested in. Let me know if I've missed any!
The biggest Vue conference in the world! A two-day event with workshops, speakers from around the world, and socializing.
"In carpentry you measure twice and cut once. In software development you never measure and make cuts until you run out of time." — Adam Morse
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.
You can detect a mouse hover in Vue just by listening to the right events:
<template><div@mouseover="hover = true"@mouseleave="hover = false"/></template>
Then you can use this state to change how the background is rendered, update computed props, or anything else you want.
Depending on your use case, you may want to check out the mouseout and mouseenter events as well. There are some subtleties with how they bubble and interact with child elements.
Michael Hoffman curates a fantastic weekly newsletter with the best Vue and Nuxt links.
p.s. I also have a bunch of products/courses: