What Can You Do with Vue 3.5?

Vue recently released long-awaited version 3.5, and it’s got some big and exciting changes. It’s been over 4 years since the original release of Vue 3.0 which introduced the “new” Composition API, full Typescript support, and more.

But, as is often the case, new releases have hold outs. So today, let’s cover what Vue 3.5 brings to the table that make it a worthwhile upgrade.

My Personal Favorite New Feature: useTemplateRef()

There are a few features in Vue that drive me nuts, and referring to an DOM object in your script was one of them:

<template>
  <input ref="my-input" />
</template>
<script setup>
import { ref } from "Vue";

const myInput = ref(null); // What's this? Who knows!
</script>

Vue is wonderful and will tie our ref to it’s matching HTML element in our template. But, it didn’t allow us to do that explicitly until now. The new syntax allows us to use the following syntax and achieve the same end. Plus if that wasn’t cool enough, the language tools also got an upgrade to support types coming from the DOM.

<template>
  <input ref="my-input" />
</template>
<script setup lang="ts">
import { useTemplateRef } from "Vue";

const myInput = useTemplateRef("my-input");
const val = myInput.value; // TS knows this is an InputHTMLAttribute!
</script>

Destructure Your Props

Another annoyance (I do actually like you, Vue, I promise) is the repetition. This was a grip I still have to some degree with things like ComputedRef where we need to call .value 50 times in every component.

The real winner is that we are now able to destructure our props instead of needing to write them out many times over.

<script setup lang="ts">
interface Props {
  foo: string;
  bar: string;
  baz: string;
}

const props = defineProps<Props>();
console.log(props.foo, props.bar, props.baz);

// Now becomes...

const { foo, bar, baz } = defineProps<Props>();
console.log(foo, bar, baz);
</script>

A chef's kiss GIF

Lazy Hydration

A bit less common because of Vue's progressive usage in most places, but for meta frameworks like Nuxt, this is a huge win. Server Side Rendering (SSR) with Nuxt is already wonderful, and any improvements here for the hydration is welcome. The example below allows for Vue to automatically fetch and hydrate components, only when they are visible on the screen.

<script setup>
import { defineAsyncComponent, hydrateOnVisible } from 'vue'

const AsyncComp = defineAsyncComponent({
  loader: () => import('./AsyncGuy.vue'),
  hydrate: hydrateOnVisible()
})
<script>