vue/prefer-use-template-ref
require using
useTemplateRefinstead ofref/shallowReffor 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/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