prefer-use-template-ref.md

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

vue/prefer-use-template-ref

require using useTemplateRef instead of ref for template refs

• ❗ This rule has not been released yet.

📖 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 for template refs.

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

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

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

  /* ✗ BAD */
  const closeRef = ref();
</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 => button = ref">Content</button>
</template>

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

🔧 Options

Nothing.

🔍 Implementation

• Rule source
• Test source