Exclusive tips every week

Hey!

Can't believe we're already in the middle of December. Hope you're getting everything wrapped up before the holidays and finding some time to relax.

Here's some Vue and Nuxt content to enjoy with your coffee.

— Michael

🔥 Lonely children

Here's a technique that makes it super easy to simplify nested elements:

You take everything inside a v-if or v-for and extract it into a new component.

You'll go from this, with some nesting:

<template>
  <div>
    <!-- ... -->
    <div v-for="item in list">
      <h2 class="item-title">
        {{ item.title }}
      </h2>
      <p class="item-description">
        {{ item.description }}
      </p>
    </div>
    <!-- ... -->
  </div>
</template>

To this, where the nesting is gone:

<template>
  <div>
    <!-- ... -->
    <ListItem
      v-for="item in list"
      :item="item"
    />
    <!-- ... -->
  </div>
</template>

To do this, you extract the code in the v-for into a new component:

<!-- ListItem.vue -->
<template>
  <div>
    <h2 class="item-title">
      {{ item.title }}
    </h2>
    <p class="item-description">
      {{ item.description }}
    </p>
  </div>
</template>

This technique becomes more and more valuable the more nesting you have.

Note: You can choose to do this recursively, taking every v-for or v-if and creating a new component. But often, it's simpler to grab a more significant chunk of the template and remove most of the nesting with one new component.

I've written about this technique in more detail here.

🔥 Debugging Templates

If you ever need to debug what’s happening inside of a template, you can just throw in a function:

<template>
  <div v-for="i in 4" :key="i">
    {{ log(i) }}
    {{ i + 1 }}
  </div>
</template>

Vue will execute anything within the curly braces as Javascript, so this function is called normally.

It can be whatever you want. Set it to console.log if you just want to log out some values:

const log = console.log;

Or add in a debugger statement so you can step through the code one line at a time and inspect the variables more closely:

const log = (val) => {
  debugger;
};

If we want global access to a debugging utility, we can use the globalProperties field on our app config:

app.config.globalProperties.$log = console.log;

Now, we can use this $log method in whatever component we want:

🔥 Lightweight State Management

We can add computed and methods directly on to a reactive object:

const counter = reactive({
  count: 0,
  increment() {
    this.count += 1;
  },
  decrement() {
    this.count -= 1;
  },
});

This works because this is set to the object that the method is accessed through, which happens to be the reactive object.

Vue’s reactivity system uses Proxies to watch for when a property is accessed and updated. In this case, we have a small overhead from accessing the method as a property on the object, but it doesn’t trigger any updates.

If we had a whole series of counters we can reuse this over and over:

const listOfCounters = [];
for (const i = 0; i < 10; i++) {
  const counter = reactive({
    id: i,
    count: 0,
    increment() {
      this.count += 1;
    },
    decrement() {
      this.count -= 1;
    },
  })
  listOfCounters.push(counter);
}

In our template we can use the counters individually:

<div v-for="counter in listOfCounters" :key="counter.id">
  <button @click="counter.decrement()">-</button>
  {{ counter.count }}
  <button @click="counter.increment()">+</button>
</div>

Instead of making the entire object reactive, we can use ref to make only our state reactive:

const counter = {
  count: ref(0),
  increment() {
    this.count.value += 1;
  },
  decrement() {
    this.count.value -= 1;
  },
};

This saves us a small and likely unnoticeable overhead. But it also feels somewhat better since we’re being more thoughtful with our use of reactivity instead of spraying it everywhere.

Here’s our example from before, but this time I’m going to add in a factory function to make it more readable:

const createCounter = (i) => ({
  id: i,
  count: ref(0),
  increment() {
    this.count.value += 1;
  },
  decrement() {
    this.count.value -= 1;
  },
});

const listOfCounters = [];
for (const i = 0; i < 10; i++) {
  listOfCounters.push(createCounter(i));
}

Of course, we can use a factory method with the previous reactive method as well.

📜 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

📜 Compressing Images with Vite and VSharp

Images are one of the biggest causes of slow webpages.

We have a bunch of strategies for dealing with this, but the most basic one is to make sure each and every image in your app is compressed as much as possible.

Fortunately for us, setting up Nuxt to automatically compress our images only takes a few minutes.

Check it out here: Compressing Images with Vite and VSharp

💬 Bugs

"If debugging is the process of removing software bugs, then programming must be the process of putting them in." — Edsger Dijkstra

🧠 Spaced-repetition: Start with the Interface

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 writing a composable, don’t immediately dive into implementing it.

Instead, take a moment to figure out how you will be using the component. Take some time to think about the interface between the composable and the rest of your app.

A few minutes upfront can save you a lot of tears and frustration later on.

Here are a few questions you may want to ask yourself before starting:

1. What arguments should the composable receive?
2. What options do we want to include?
3. What does the composable return?
4. Do we want to use dynamic return values here?
5. What does the minimum useful version look like, and how quickly can we get there?
6. What does the final version look like? Is there anything easy we can do now to prepare for that?

Of course, your composable will change and evolve over time.

But it’s much easier to start off heading in the right direction.

🔗 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.