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 all!
I've been working on an update for Clean Components Toolkit, adding three new patterns to it.
That will bring it up from 18 to a total of 21 — it's about 20% more content than before! I don't yet have a hard timeline on when that will be finished though.
And in case you missed it, last week's episode of Deja Vue was with Marc Backes, who has had a big impact on the Vue community for a long time now.
The episode covers:
Plus a lot more!
You can watch or listen to the episode here.
I've also got a bunch of great tips for you!
— Michael
Reactive values cannot be reassigned how you might expect:
const myReactiveArray = reactive([1, 2, 3]);watchEffect(() => console.log(myReactiveArray));// "[1, 2, 3]"myReactiveArray = [4, 5, 6];// The watcher never fires// We've replaced it with an entirely new, non-reactive object
This is because the reference to the previous object is overwritten by the reference to the new object. We don’t keep that reference around anywhere.
Vue developers for years have been tripped up by how reactivity works when reassigning values, especially with objects and arrays:
// You got a new array, awesome!// ...but does it properly update your app?myReactiveArray = [1, 2, 3];
This was a big issue with Vue 2 because of how the reactivity system worked. Vue 3 has mostly solved this, but we’re still dealing with this issue when it comes to reactive
versus ref
.
The proxy-based reactivity system only works when we access properties on an object.
I’m going to repeat that because it’s such an important piece of the reactivity puzzle.
Reassigning values will not trigger the reactivity system. You must modify a property on an existing object.
This also applies to refs, but this is made a little easier because of the standard .value
property that each ref
has:
const myReactiveArray = ref([1, 2, 3]);watchEffect(() => console.log(myReactiveArray.value));// "[1, 2, 3]"myReactiveArray.value = [4, 5, 6];// "[4, 5, 6]"
When building a UI, there are many different states that you need to consider:
200ms
before showing a spinner. If the data loads before that, it feels faster than if you quickly flash the loading spinner on and then off again.In Nuxt 3, instead of importing all of your dependencies like this:
// Part of my blogimport BasicLayout from './BasicLayout.vue';import Footer from '../components/Footer';import Subscribe from '../components/Subscribe';import LandingMat from '../components/LandingMat';import Logo from '../icons/Logo';import LogoClip from '../icons/LogoClip';import TriangleShape from '../icons/TriangleShape';import SquareShape from '../icons/SquareShape';
You import them like this:
// ...just kidding. No imports needed!
Just use your components, composables, or layouts where you need them, and Nuxt takes care of the rest.
It may seem like a small thing, but auto-imports in Nuxt 3 make the whole developer experience so much nicer. It only imports what you need, when you need it.
This makes your app much faster as well!
Yes, your dependencies are now less explicit. But if you keep your components and composables small enough it shouldn’t matter that much. You should still be able to see pretty quickly what’s going on in your application.
I've written 58 Vue tips so far this year for you.
That's 2 every week for 29 weeks (since March 22).
I put 25 of them together for you in this one article (which is one of the top Vue posts of all time on DEV.to).
Check it out here: 25 Vue Tips You Need to Know
"Good code is its own best documentation. As you're about to add a comment, ask yourself, 'How can I improve the code so that this comment isn't needed?'" — Steve McConnell
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 want some styles to apply specifically to slot content, you can do that with the :slotted
pseudo-selector:
<style scoped>/* Add margin to <p> tags within the slot */:slotted(p) {margin: 15px 5px;}</style>
You can also use :global
to have styles apply to global scope, even within the <style scoped>
block:
<style scoped>:global(body) {margin: 0;padding: 0;font-family: sans-serif;}</style>
Of course, if you have lots of global styles you want to add, it's probably easier to just add a second <style>
block:
<style scoped>/* Add margin to <p> tags within the slot */:slotted(p) {margin: 15px 5px;}</style><style>body {margin: 0;padding: 0;font-family: sans-serif;}</style>
Check out the docs for more info.
p.s. I also have four products/courses: Clean Components Toolkit, Vue Tips Collection 2, Mastering Nuxt 3, and Reusable Components