Design patterns in @vuejs are incredibly useful.

But how many of them do you know?

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.

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:

1. Prop drilling
2. Event frothing
3. Cousin and sibling components

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

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:

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:

We all know how incredible GPT-4 is with programming.

But it's *terrible* when it comes to @nuxt_js 3.

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`?"

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:

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`:

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.

Mastering Nuxt 3 is the *official* course on @nuxt_js 3!

A collaboration between myself, @VueSchool_io, and the team behind Nuxt, @nuxtlabs.

Here’s what you will learn from Mastering Nuxt 3:

masteringnuxt.com/nuxt3?utm_camp… By the end you’ll be able to build prod-ready Nuxt 3 apps from scratch.

We’ll do this by building an online course platform.

But this course isn’t about watching me code a cool app.

This is the most important project in @vuejs.

But most Vue devs don’t know a lot about it.

Here are 12 incredible features of @nuxt_js 3 you probably know nothing about: 1. Convention over configuration

Making lots of decisions about how to configure your app is exhausting.

It’s hard to know what the best practices are, and you’d rather be shipping new features instead of researching.

Here are 10 short tips on using composables in @vuejs.

These will help you when using the composition API in Vue 3.

Let's get to it! 1. Start with the end in mind, and write the return first.

Once you know how you want the composable to used, it's much easier to fill in the implementation details.

Did you know you can write reactive CSS in @vuejs 3?

We can use reactive values in our `<style>` block just like we can in the `<template>` block:

#webdevelopment Behind the scenes Vue uses CSS custom properties (aka CSS variables) that are scoped to each component.

This way the CSS remains static, but we can dynamically update the CSS variables whenever the reactive value changes.

Let me show you how to *steal* prop types in @vuejs.

I often find that I'm copying prop types from a child component to a parent.

For example, we have an `Icon` component being used in this component:

#webdevelopment To get this to work, we need to add the correct prop types, copying from the `Icon` component:

Here's a mega-thread of my best @vuejs tips.

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

Sign up here michaelnthiessen.com/newsletter

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:

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: