prefer-use-template-ref.md

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

vue/prefer-use-template-ref

require using useTemplateRef instead of ref for template refs

📖 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.

🚀 Version

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

🔍 Implementation

• Rule source
• Test source