Skip to content

Rule proposal: vue/prefer-use-template-ref #2549

Closed
@jordydhoker

Description

@jordydhoker

Please describe what the rule should do:
Vue 3.5 released a new preferred method of binding to template refs, useTemplateRef. This rule suggests using the new API over the old plain ref style. It has better dev tools support, supports dynamic keys and is more self-documenting.

What category should the rule belong to?

[ ] Enforces code style (layout)
[ ] Warns about a potential error (problem)
[X] Suggests an alternate way of doing something (suggestion)
[ ] Other (please specify:)

Provide 2-3 code examples that this rule should warn about:

<template>
  <input ref="input">
</template>

<script setup>
<!-- BAD -->
const input = ref();

<!-- GOOD -->
import { useTemplateRef } from 'vue'

const input = useTemplateRef('input')
</script>

Additional context
https://vuejs.org/api/composition-api-helpers.html#usetemplateref Docs about the API
https://blog.vuejs.org/posts/vue-3-5#usetemplateref Reasoning for the the new recommendation.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions