🔥 (#134) v-once and refreshing pages

Hey all!

Clean Components Toolkit will not be launched next week.

I've been really sick the last 5 weeks, and unfortunately I haven't been able to work very much at all beyond getting this newsletter out to you.

But I'm feeling much better now and recovering!

However, for now getting healthy is my focus.

I'll definitely keep you up to date with how things are going though!

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

— Michael

Vue Tips Collection

Maybe you just want to stay on top of the latest features, remind yourself of interesting things Vue can do, and get daily inspiration.

Vue Tips Collection is a beautiful book of 115 awesome tips, as well as a daily email to get your creative juices flowing.

​Check out Vue Tips Collection​

🔥 Refresh a Page in Vue

If you need to force a reload your entire page using Vue, all you need is some Javascript:

window.location.reload();

But this is a code smell — you should almost never need to use this method.

Instead, a better solution might be one of these:

• Create a method to reset and initialize state instead of relying on onMounted hooks or the top-level of setup. You can also create an initialize action for Pinia.
• Make sure your important state is reactive. This tends to fix a lot of common issues.
• Key-changing — by changing just the key attribute on a specific component, you can force just one component to reload instead of your entire app. Still a bit of a hack, but it gets the job done.

v-once

If you've got large chunks of static or mostly static content, you can tell Vue to (mostly) ignore it using the v-once directive:

<template>    <!-- These elements never change -->    <div v-once>      <h1 class="text-center">Bananas for sale</h1>      <p>        Come get this wonderful fruit!      </p>      <p>        Our bananas are always the same price — ${{ banana.price }} each!      </p>        <div class="rounded p-4 bg-yellow-200 text-black">        <h2>          Number of bananas in stock: as many as you need        </h2>        <p>          That's right, we never run out of bananas!        </p>      </div>        <p>        Some people might say that we're... bananas about bananas!      </p>    </div>  </template>

This can be a helpful performance optimization if you need it.

The v-once directive tells Vue to evaluate it once and never update it again. After the initial update it's treated as fully static content.

Here are the docs for v-once.

🔥 Performance Tracing

Vue allows you to do performance tracing to help you debug any performance issues:

const app = createApp({});  app.config.performance = true;

Once you do this, you can use the official Vue Devtools to debug your app's performance.

VueConf Toronto: 5 Patterns for Better Components

At VueConf Toronto this year I'm giving a talk and a workshop!

The talk is on patterns for writing better components, material based on the Clean Components Toolkit.

The workshop is also similar material, but we have a whole day to get hands on and really dig into the patterns and learn to apply them.

For the workshop, you'll have a choice to work on simplifying your own code, or working through examples/exercises that I'll provide.

There will also be a focus on discussion and collaboration with the other workshop attendees.

Workshops are on November 9, and the conference is November 10.

I hope to see you there!

VueConf Toronto VueConf Workshops

📜 Prisma with Nuxt 3: Modifying Data with Prisma (5 of 5)

So far in this series we've covered a lot on how to use Prisma in our Nuxt 3 apps.

But we've left out a major piece — actually being able to modify the data in the database.

A pretty crucial part of the puzzle I think!

In this article I'll show you how to modify data in your database using Prisma.

Check it out here: Prisma with Nuxt 3: Modifying Data with Prisma (5 of 5)

💬 Hardly Ever Happens

""That hardly ever happens" is another way of saying "it happens"." — Douglas Crockford

🧠 Spaced-repetition: The Right Number of Options for Composables

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.

The Options Object Pattern can be really useful, but it can cause trouble if used too much.

If you have only a couple options for your composable, it may be simpler to leave it out:

import { onMounted, onBeforeUnmount } from 'vue';    export function useEvent(event, handler, target = window) {    // No point in having an options object      onMounted(() => {      target.addEventListener(event, handler);    });      onBeforeUnmount(() => {      target.removeEventListener(event, handler);    });  };

If we need to target a different element, like a button, we can use it like this:

import useEvent from '~/composables/useEvent.js';    // Triggers anytime you click the button  useEvent(    'click',    () => console.log('You clicked the button!'),    buttonElement  );

But, if we want to add more options in the future, we break this usage because we've changed the function signature:

before: useEvent(event, handler, target)  after:  useEvent(event, handler, options)

It's a design choice you'll have to make. Starting with a small options object prevents breaking, but adds a small amount of complexity to your composable.

But what if you have lots of options?

Since all of the options are optional, the sheer number of options is never really a problem when it comes to using a composable. Further, we can organize the options into sub objects if we really felt the need.

With the useEvent composable we can group all the listenerOptions into their own object to help organize things:

import { onMounted, onBeforeUnmount } from 'vue';    export function useEvent = (event, handler, options) => {    // Default to targeting the window    const {      target = window,      listener,    } = options;      onMounted(() => {      target.addEventListener(event, handler, listener);    });      onBeforeUnmount(() => {      target.removeEventListener(event, handler, listener);    });  };

The usage now becomes this:

import useEvent from '~/composables/useEvent.js';    // Triggers only the first time you click in the window  useEvent(    'click',    () => console.log('First time clicking the window!'),    {      listener: {        once: true,      }    }  );

p.s. I also have four products to help you learn Vue: Clean Components Toolkit, Vue Tips Collection, Mastering Nuxt 3 and Reusable Components

Unsubscribe | 8 Queen St N, Kitchener, ON N2H2G8