Michael Hoffmann LogoMichael Hoffmann
·
0 min read

Vue Tip: Use Optional Chaining in Templates

Vue Tip: Use Optional Chaining in Templates Image
Template

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.

If you liked this Vue tip, follow me on X to get notified about new tips, blog posts, and more. Alternatively (or additionally), you can subscribe to my weekly Vue & Nuxt newsletter:

I will never share any of your personal data. You can unsubscribe at any time.

Vue Tip: Use Two Script Blocks

<script setup> can be used alongside normal <script>. A normal <script> may be needed in special cases.

Vue Tip: Special CSS Selectors

Vue provides some special CSS pseudo-selectors you can use in your Vue SFC.