Here are 6 different patterns from the Clean Components Toolkit.
@vuejs In growing applications, prop drilling and event frothing increase complexity, as state and events are passed through many component layers.
The Data Store Pattern solves this by creating a global state singleton, exposing parts of this state, and including methods to modify it.
Jul 2 • 15 tweets • 5 min read
Are you managing state the right way in your @vuejs app?
It can be very tricky to keep things simple and easy to work with.
That's why I want to share the Data Store Pattern with you.
@vuejs When trying to pass state between components we run into three main issues:
To keep your @vuejs composables — those extracted functions written using the composition API — neat and easy to read, here's one way to organize the code.
Let me know if you'd change this order at all:
@vuejs 1. Component and directives 2. `provide` and `inject` 3. `defineProps`, `defineEmits`, and `defineExpose` (when using `script setup`) 4. `refs` and `reactive` variables 5. Computed properties 6. Immediate watchers
Jun 5 • 7 tweets • 2 min read
With `reactive` objects in @vuejs we can organize our state into objects instead of having a bunch of refs floating around:
@vuejs Passing around a single object instead of lots of refs is much easier, and helps to keep our code organized:
Feb 17 • 9 tweets • 3 min read
Proper error handling is a crucial part of any production @vuejs app, even if it isn’t the most exciting thing.
@nuxt_js 3 comes with the `NuxtErrorBoundary` component which makes handling client-side errors a breeze:
@vuejs @nuxt_js Use the `error` named slot and the `error` object to show an error message to the user:
Mar 27, 2023 • 18 tweets • 5 min read
We all know how incredible GPT-4 is with programming.
Here's how I (mostly) fixed that.
First, here's the response my tool gives with the same question:
"What are different options I can use with `useCookie`?"
Mar 25, 2023 • 6 tweets • 2 min read
Sometimes complicated layouts are, well, complicated.
But using grid-template-areas is here to help!
With this HTML, you'd first attach grid-area names to each element:
Jan 2, 2023 • 7 tweets • 2 min read
You can get an element to render *anywhere* in the DOM with the `teleport` component in @vuejs 3:
This will render the `footer` at the very end of the document `body`:
Dec 31, 2022 • 8 tweets • 2 min read
Here are 9 tips on writing better composables in @vuejs:
1. Start with the end in mind, and write the return first.
Once you know how you want the composable to be used, filling in the implementation details is much easier.
2. Use an options object as the parameter.
This makes it easy to add new parameters in the future without breaking anything, and you won't mess up the ordering anymore.
Oct 25, 2022 • 20 tweets • 4 min read
Mastering Nuxt 3 is the *official* course on @nuxt_js 3!
Enjoy, retweet, and let me know what you think!
If you want more @vuejs tips like this, I send out a newsletter with tips and insights on using Vue every week.
"This is the first time where I'm actually enjoying email newsletters" — Fahmi
This is how you master computed props in @vuejs 👇🏻
When a function does more than just return a value, it makes your code more complicated.
These are called side effects, and you should never have them inside of a computed prop:
But we can fix this.
We can move that side effect into a watcher that is triggered whenever the computed prop updates:
Oct 21, 2021 • 5 tweets • 2 min read
1/ Did you know that you can destructure in a `v-for` in @vuejs? 2/ It's more widely known that you can grab the index out of the v-for by using a tuple like this: