prefer-use-template-ref.md

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

vue/prefer-use-template-ref

require using useTemplateRef over ref for template refs

• ❗ This rule has not been released yet.
• 🔧 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 over ref for template refs.

<template>
  <div ref="divRef"></div>
  <button ref="submitter">Submit</button>
</template>

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

  /* ✓ GOOD */
  const divRef = useTemplateRef('divRef');
  const div = useTemplateRef('divRef');
  const loremIpsum = useTemplateRef('divRef');
  const submitButton = useTemplateRef('submitter');
  /* ✗ BAD */
  const divRef = ref();
  const submitter = ref();
</script>

🔧 Options

Nothing.

🔍 Implementation

• Rule source
• Test source