vue/prefer-use-template-ref
require using
useTemplateRef
instead ofref
/shallowRef
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
/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