🔥 (#188) Pinia and data loaders, overriding styles, and UI states

Hey all!

This week I started working on the final session for Advanced Frontend Testing in Vue.

These exercises are focused on e2e testing and best practices, and are the last pieces of material for the course.

After that, I'm working on getting all of this testing material ready and polished so I can get it out to you!

I've also got two conferences in November — Nuxt Nation and VueConf Toronto — and I'm looking forward to both!

I'm also in the early processes of figuring out the update for Mastering Nuxt. But since Nuxt 4 isn't even out yet, I'm not sure what the timeline will be on that.

Anyone who has bought Mastering Nuxt 3 will get it as a free update, so you can scoop it up on a good Black Friday sale and still get the new stuff!

As always, I've got some tips and articles for you.

I've also got a great podcast episode with my friend Eduardo San Martin Morote (author of Vue Router and Pinia).

Have a great October!

— Michael

🔥 Overriding styles of a child component — the right way

Scoped CSS is fantastic for keeping things tidy and not accidentally bleeding styles into other parts of your app.

But sometimes, you need to override the styles of a child component and break out of that scope.

Vue has a :deep selector just for this:

<style scoped>
/* Override CSS of a child component
   while keeping styles scoped */
.my-component :deep(.child-component) {
  font-size: 24px;
}
</style>

In Vue 2 this has a slightly different syntax depending on which CSS pre-processor you're using:

<style scoped>
/* When using SASS */
.my-component ::v-deep .child-component {
  font-size: 24px;
}

/* Everything else */
.my-component >>> .child-component {
  font-size: 24px;
}
</style>

Yes, I have previously covered why you shouldn't do this, but overriding styles can be the best solution (we don't believe in "best practices" here).

🔥 UI states to get right

When building a UI, there are many different states that you need to consider:

• Normal — Sometimes called the "happy path," this is when things are working as expected. For example, in an email client, you'd show some read emails, some unread emails, and maybe a few that are in the "spam" folder.
• Loading — Your UI has to do something while getting the data, right? A couple tricks:
  1. Use a computed prop to combine multiple loading states — you don't want spinners all over the page.
  2. Wait about 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.
• Error — Things will go wrong, and you need to handle that gracefully. Effectively communicating problems to users to help them get unstuck is very tricky (don't make me guess the password requirements!). Hopefully, you have a good UX designer. Empty — What happens when you have no emails to read, have completed all your tasks, or haven't uploaded any videos yet? A chart showing the "Last 30 Days" of data will probably look weird with no data.
• Partial Data — Often similar to the empty state, but your big table with filtering and sorting also needs to work with only two rows of data. The list of emails shouldn't break with only one email in it.
• Lots of data — Okay, now you have 1294 unread emails. Does your UI break? Maybe that infinite scrolling doesn't make as much sense as when there were only 42 emails.

🔥 Detect mouse hover in your component

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.

🎙️ #030 — Pinia and Data Loaders (with Eduardo San Martin Morote)

Michael is joined by VueRouter and Pinia author Eduardo San Martin Morote aka posva.

Together, they go deep into questions around the de-facto standard state management tool and why people should use Pinia, but also discuss what Data Loaders and Pinia Colada are (not the drink friends!).

Further, the two content creators discuss how Mastering Pinia came together and what challenges are to expect when going from a "live workshop" to recorded videos.

And of course, we can't forget upcoming conferences and meetups - with a sneak peek of what Eduardo might present 👀

Watch on YouTube or listen on your favorite podcast platform.

Chapters:

• Welcome to DejaVue
• Upcoming Vue Conferences
• Eduardo's Involvement in VueX
• Why would you use Pinia?
• Another view on stores
• Insights from Mastering Pinia
• Live Workshop vs recorded videos
• How to improve tech video content
• Data Loaders API
• Pina Colada vs GraphQL
• RFC for Data Loaders
• Organising a Meetup
• Wrapping up with a discount

In case you missed them:

• #029 — Inertia.js (with Joe Tannenbaum)
• #028 — Vue Performance Tips
• #027 — Working at AWS (with Erik Hanchett)

📜 Create Beautiful PDFs with HTML, CSS, and Markdown

I wasted thousands of dollars hiring someone to format and layout a previous book, but it was a painful process.

Then I built an easy-to-use tool that lets me use just HTML, CSS, and Markdown to create beautiful ebooks and PDFs.

In this article, I share exactly how I do it.

Check it out here: Create Beautiful PDFs with HTML, CSS, and Markdown

📜 Exploring Server Components in Nuxt

You may have heard about server components, but there are some really interesting things you can do with them.

In this article I explore a few really cool things we can do with server components.

Check it out here: Exploring Server Components in Nuxt

📅 Upcoming Events

Here are some upcoming events you might be interested in. Let me know if I've missed any!

Nuxt Nation 2024 — (November 12, 2024 to November 13, 2024)

The biggest Nuxt conference in the world! A free two-day event online. I will speaking on Nuxt Server Components!

Check it out here

VueConf Toronto 2024 — (November 18, 2024 to November 20, 2024)

My favourite Vue conference, in my own backyard! A three-day event with workshops, speakers from around the world, and socializing. I will be speaking on Nuxt Layers!

Check it out here

Vuejs Amsterdam 2025 — (March 12, 2025 to March 13, 2025)

The biggest Vue conference in the world! A two-day event with workshops, speakers from around the world, and socializing.

Check it out here

💬 Stay in bed

"Sometimes it pays to stay in bed on Monday, rather than spending the rest of the week debugging Monday’s code." — Christopher Thompson or Dan Salomon

🧠 Spaced-repetition: Global Components

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.

When you register a component globally, you can use it in any template without importing it a second time:

// Vue 3
import { createApp } from 'vue';
import GlobalComponent from './GlobalComponent.vue';

const app = createApp({})
app.component('GlobalComponent', GlobalComponent);

In Vue 2 you can register global components like this:

// Vue 2
import Vue from 'vue';
import GlobalComponent from './GlobalComponent.vue';
Vue.component('GlobalComponent', GlobalComponent);

Now you can use GlobalComponent in your templates without any extra work!

Of course, globally registered components have the same pros and cons as global variables. So use this sparingly.

🔗 Want more Vue and Nuxt links?

Michael Hoffman curates a fantastic weekly newsletter with the best Vue and Nuxt links.

Sign up for it here.

p.s. I also have four products/courses: Clean Components Toolkit, Vue Tips Collection 2, Mastering Nuxt 3, and Reusable Components