Hi there!

I'm on vacation this week (this was scheduled ahead of time) so I don't have anything new to share.

However, if you're interested in Mastering Nuxt: Full Stack Unleashed, the price is going up in a couple days so make sure to check it out if you're thinking about it!

Here's the link: Mastering Nuxt: Full Stack Unleashed

Other than that, enjoy your week and your tips!

— Michael

🔥 Optimize for Humans

The most important thing we can do when writing code is to make it work.

The second most important thing is to make it understandable to other humans — including ourselves.

All too often we write clever code, terse code, code that isn’t even understandable to ourselves when we come back to it a week or a month later.

Here are some ways to fix that:

Extract Components — by replacing a chunk of code with a meaningful name, we can separate the intention of the code from the implementation of the code. Good names are the most valuable form of abstraction that we have.
Shorter components — longer components are harder to understand at a glance, and that should be the ideal we strive for. The harder it is to understand a single component, the more mistakes you’ll make, and the longer it will take for you implement anything new.
Optimize for the most tired, frustrated version of yourself — Remember that we all have bad days, and we want to productive every day, not just our best days. Write code that even the worst version of you can understand.

🔥 Reassigning Template Refs

Reassigning values can cause issues when using the simplest form of template refs:

<template>
  <div>
    <h1 ref="heading">This is my page</h1>
  </div>
</template>

In this case, we can’t use a reactive object at all:

const heading = reactive(null);
watchEffect(() => console.log(heading));
// "null"

When the component is first instantiated, this will log out null, because heading has no value yet. But when the component is mounted and our h1 is created, it will not trigger.

The heading object becomes a new object, and our watcher loses track of it. The reference to the previous reactive object is overwritten.

We need to use a ref here:

const heading = ref(null);
watchEffect(() => console.log(heading.value));
// "null"

This time, when the component is mounted it will log out the element. This is because only a ref can be reassigned in this way.

It is possible to use reactive in this scenario, but it requires a bit of extra syntax using function refs:

<template>
  <div>
    <h1
      :ref="(el) => { heading.element = el }"
    >
      This is my page
    </h1>
  </div>
</template>

Then our script would be written as so, using the el property on our reactive object:

const heading = reactive({ el: null });
watchEffect(() => console.log(heading.el));
// "null"

🔥 Vue to Web Component in 3 Easy Steps

Here's how you can create web components in Vue.

First, create the custom element from a Vue component using defineCustomElement:

import { defineCustomElement } from 'vue';
import MyVueComponent from './MyVueComponent.vue';

const customElement = defineCustomElement(MyVueComponent);

Second, register the custom element with the DOM:

customElements.define('my-vue-component', customElement);

Third, use the custom element in your HTML:

<html>
  <head></head>
  <body>
    <my-vue-component></my-vue-component>
  </body>
</html>

Now you've got a custom web component that doesn't need a framework and can run natively in the browser!

Check out the docs for more details on how this works.

📜 3 Ways to Create Inline Composables

Composables are great, except that it seems we always need to create a new file for them.

In this article I explore some ways we can create inline composables — no need to create new files all over the place!

Check it out here: 3 Ways to Create Inline Composables

📜 Build 3D Scenes Declaratively with TresJS Using Vue

Alvaro has done some really impressive work with TresJS, a 3D library for Vue.

In this article he showcases just how easy it is to create 3D scenes in Vue when using TresJS.

Definitely check it out if you're interested in 3D development with Vue!

Check it out here: Build 3D Scenes Declaratively with TresJS Using Vue

💬 The Code You Don't Write

"The code you write makes you a programmer. The code you delete makes you a good one. The code you don't have to write makes you a great one." — Mario Fusco

🧠 Spaced-repetition: toRef default value

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.

You've been using toRef for a while, but did you know you can also supply a default value?

const bank = reactive({
  Rand: 3400,
  Egwene: 20,
  Matrim: 230340,
  Padan: -20340,
})

// toRef(object, property, default)
const myBankAccount = toRef(bank, 'Michael', 1000 * 1000);

Probably the easiest way to become a millionaire.

🔗 Want more Vue and Nuxt links?

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

p.s. I also have a bunch of products/courses:

Exclusive tips every week

I really love and enjoy reading these emails.

You are one of the most pro VueJS devs I know, and I am happy that you share this knowledge.

Fabian Beer

Here's my latest newsletter

🔥 (228) Optimize for humans, reassigning template refs, and Vue to Web Component