prefer-use-template-ref.md

pageClass	sidebarDepth	title	description	since
rule-details	0	vue/prefer-use-template-ref	require using `useTemplateRef` instead of `ref`/`shallowRef` for template refs	v9.31.0

vue/prefer-use-template-ref

require using useTemplateRef instead of ref/shallowRef for template refs

• 🔧 The --fix option on the command line can automatically fix some of the problems reported by this rule.

📖 Rule Details

Vue 3.5 introduced a new way of obtaining template refs via the useTemplateRef() API.

This rule enforces using the new useTemplateRef function instead of ref/shallowRef for template refs.

<template>
  <button ref="submitRef">Submit</button>
  <button ref="cancelRef">Cancel</button>
  <button ref="closeRef">Close</button>
</template>

<script setup>
  import { ref, shallowRef, useTemplateRef } from 'vue';

  /* ✓ GOOD */
  const submitRef = useTemplateRef('submitRef');
  const submitButton = useTemplateRef('submitRef');
  const closeButton = useTemplateRef('closeRef');

  /* ✗ BAD */
  const closeRef = ref();
  const cancelRef = shallowRef();
</script>

This rule skips ref template function refs as these should be used to allow custom implementation of storing ref. If you prefer useTemplateRef, you have to change the value of the template ref to a string.

<template>
  <button :ref="ref => submitRef = ref">Submit</button>
  <button :ref="ref => cancelRef = ref">Cancel</button>
</template>

<script setup>
  import { ref, shallowRef } from 'vue';
  
  /* ✓ GOOD */
  const submitRef = ref();
  const cancelRef = shallowRef();
</script>

🔧 Options

Nothing.

🚀 Version

This rule was introduced in eslint-plugin-vue v9.31.0

🔍 Implementation

• Rule source
• Test source