Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
jordydhoker opened this issue Sep 10, 2024 · 1 comment · May be fixed by #2554
Open

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

jordydhoker opened this issue Sep 10, 2024 · 1 comment · May be fixed by #2554

Comments

@jordydhoker
Copy link

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.

@FloEdelmann
Copy link
Member

Good idea! PRs welcome for that.

For reference, support for useTemplateRef is added to vue/no-unused-refs in #2541.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants