Vue Tip: Use Optional Chaining in Templates

It's possible to use Optional Chaining in Vue 3 templates:

The optional chaining operator (?.) enables you to read the value of a property located deep within a chain of connected objects without checking that each reference in the chain is valid.

Here's a simple Vue component that uses the optional chaining operator:

<template>
  <p v-if="data?.user?.name">Name: {{ data?.user?.name }}</p>
  <p>Age: {{ data?.user?.age ?? 0 }} years old</p>
</template>

<script setup>
import { ref } from 'vue'

const data = ref({ user: { name: 'Michael' } })
</script>

This Vue SFC playground shows the rendered output of this Vue component.