From ac5aa922cdc358acb9c8664d94cd91965f89efce Mon Sep 17 00:00:00 2001
From: Thomasan1999 <ahoj@tomaskudlac.sk>
Date: Sat, 30 Nov 2024 12:04:25 +0100
Subject: [PATCH 1/7] feat(prefer-use-template-ref): add support for fix option

---
 docs/rules/index.md                        |   2 +-
 docs/rules/prefer-use-template-ref.md      |   6 +-
 lib/rules/prefer-use-template-ref.js       |  82 +++++++++++
 tests/lib/rules/prefer-use-template-ref.js | 152 +++++++++++++++++++++
 4 files changed, 239 insertions(+), 3 deletions(-)

diff --git a/docs/rules/index.md b/docs/rules/index.md
index 074f4bd46..727654f63 100644
--- a/docs/rules/index.md
+++ b/docs/rules/index.md
@@ -270,7 +270,7 @@ For example:
 | [vue/prefer-prop-type-boolean-first](./prefer-prop-type-boolean-first.md) | enforce `Boolean` comes first in component prop types | :bulb: | :warning: |
 | [vue/prefer-separate-static-class](./prefer-separate-static-class.md) | require static class names in template to be in a separate `class` attribute | :wrench: | :hammer: |
 | [vue/prefer-true-attribute-shorthand](./prefer-true-attribute-shorthand.md) | require shorthand form attribute when `v-bind` value is `true` | :bulb: | :hammer: |
-| [vue/prefer-use-template-ref](./prefer-use-template-ref.md) | require using `useTemplateRef` instead of `ref`/`shallowRef` for template refs |  | :hammer: |
+| [vue/prefer-use-template-ref](./prefer-use-template-ref.md) | require using `useTemplateRef` instead of `ref`/`shallowRef` for template refs | :wrench: | :hammer: |
 | [vue/require-default-export](./require-default-export.md) | require components to be the default export |  | :warning: |
 | [vue/require-direct-export](./require-direct-export.md) | require the component to be directly exported |  | :hammer: |
 | [vue/require-emit-validator](./require-emit-validator.md) | require type definitions in emits | :bulb: | :hammer: |
diff --git a/docs/rules/prefer-use-template-ref.md b/docs/rules/prefer-use-template-ref.md
index 1b1b40385..ed5699ee8 100644
--- a/docs/rules/prefer-use-template-ref.md
+++ b/docs/rules/prefer-use-template-ref.md
@@ -10,6 +10,8 @@ since: v9.31.0
 
 > require using `useTemplateRef` instead of `ref`/`shallowRef` for template refs
 
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+
 ## :book: Rule Details
 
 Vue 3.5 introduced a new way of obtaining template refs via
@@ -17,7 +19,7 @@ the [`useTemplateRef()`](https://vuejs.org/guide/essentials/template-refs.html#a
 
 This rule enforces using the new `useTemplateRef` function instead of `ref`/`shallowRef` for template refs.
 
-<eslint-code-block :rules="{'vue/prefer-use-template-ref': ['error']}">
+<eslint-code-block fix :rules="{'vue/prefer-use-template-ref': ['error']}">
 
 ```vue
 <template>
@@ -45,7 +47,7 @@ This rule enforces using the new `useTemplateRef` function instead of `ref`/`sha
 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.
 
-<eslint-code-block :rules="{'vue/prefer-use-template-ref': ['error']}">
+<eslint-code-block fix :rules="{'vue/prefer-use-template-ref': ['error']}">
 
 ```vue
 <template>
diff --git a/lib/rules/prefer-use-template-ref.js b/lib/rules/prefer-use-template-ref.js
index 7d01958b7..16e6f866c 100644
--- a/lib/rules/prefer-use-template-ref.js
+++ b/lib/rules/prefer-use-template-ref.js
@@ -44,6 +44,59 @@ function getScriptRefsFromSetupFunction(body) {
   return refDeclarators.map(convertDeclaratorToScriptRef)
 }
 
+/** @param node {Statement | ModuleDeclaration} */
+function createIndent(node) {
+  const indentSize = node.loc.start.column
+
+  return ' '.repeat(indentSize)
+}
+
+/**
+ *  @param context {RuleContext}
+ *  @param fixer {RuleFixer}
+ * */
+function addUseTemplateRefImport(context, fixer) {
+  const sourceCode = context.sourceCode
+
+  if (!sourceCode) {
+    return
+  }
+
+  const body = sourceCode.ast.body
+
+  const imports = body.filter((node) => node.type === 'ImportDeclaration')
+
+  const vueDestructuredImport = imports.find(
+    (importStatement) =>
+      importStatement.source.value === 'vue' &&
+      importStatement.specifiers.some(
+        (specifier) => specifier.type === 'ImportSpecifier'
+      )
+  )
+
+  if (vueDestructuredImport) {
+    const importSpecifierLast = vueDestructuredImport.specifiers.at(-1)
+
+    // @ts-ignore
+    return fixer.insertTextAfter(importSpecifierLast, `,useTemplateRef`)
+  }
+
+  const lastImport = imports.at(-1)
+
+  const importStatement = "import {useTemplateRef} from 'vue';"
+
+  if (lastImport) {
+    const indent = createIndent(lastImport)
+
+    return fixer.insertTextAfter(lastImport, `\n${indent}${importStatement}`)
+  }
+
+  const firstNode = body[0]
+  const indent = createIndent(firstNode)
+
+  return fixer.insertTextBefore(firstNode, `${importStatement}\n${indent}`)
+}
+
 /** @type {import("eslint").Rule.RuleModule} */
 module.exports = {
   meta: {
@@ -54,6 +107,7 @@ module.exports = {
       categories: undefined,
       url: 'https://eslint.vuejs.org/rules/prefer-use-template-ref.html'
     },
+    fixable: 'code',
     schema: [],
     messages: {
       preferUseTemplateRef: "Replace '{{name}}' with 'useTemplateRef'."
@@ -93,6 +147,8 @@ module.exports = {
       }),
       {
         'Program:exit'() {
+          let missingImportChecked = false
+
           for (const templateRef of templateRefs) {
             const scriptRef = scriptRefs.find(
               (scriptRef) => scriptRef.ref === templateRef
@@ -108,6 +164,32 @@ module.exports = {
               data: {
                 // @ts-ignore
                 name: scriptRef.node?.callee?.name
+              },
+              fix(fixer) {
+                /** @type {Fix[]} */
+                const fixes = []
+
+                const replaceFunctionFix = fixer.replaceText(
+                  scriptRef.node,
+                  `useTemplateRef('${scriptRef.ref}')`
+                )
+
+                fixes.push(replaceFunctionFix)
+
+                if (!missingImportChecked) {
+                  missingImportChecked = true
+
+                  const missingImportFix = addUseTemplateRefImport(
+                    context,
+                    fixer
+                  )
+
+                  if (missingImportFix) {
+                    fixes.push(missingImportFix)
+                  }
+                }
+
+                return fixes
               }
             })
           }
diff --git a/tests/lib/rules/prefer-use-template-ref.js b/tests/lib/rules/prefer-use-template-ref.js
index 77020cdcf..3bb3e948d 100644
--- a/tests/lib/rules/prefer-use-template-ref.js
+++ b/tests/lib/rules/prefer-use-template-ref.js
@@ -266,6 +266,15 @@ tester.run('prefer-use-template-ref', rule, {
         const root = ref();
       </script>
       `,
+      output: `
+      <template>
+          <div ref="root"/>
+      </template>
+      <script setup>
+        import { ref,useTemplateRef } from 'vue';
+        const root = useTemplateRef('root');
+      </script>
+      `,
       errors: [
         {
           messageId: 'preferUseTemplateRef',
@@ -290,6 +299,17 @@ tester.run('prefer-use-template-ref', rule, {
         const link = ref();
       </script>
       `,
+      output: `
+      <template>
+          <button ref="button">Content</button>
+          <a href="" ref="link">Link</a>
+      </template>
+      <script setup>
+        import { ref,useTemplateRef } from 'vue';
+        const buttonRef = ref();
+        const link = useTemplateRef('link');
+      </script>
+      `,
       errors: [
         {
           messageId: 'preferUseTemplateRef',
@@ -314,6 +334,17 @@ tester.run('prefer-use-template-ref', rule, {
         const link = ref();
       </script>
       `,
+      output: `
+      <template>
+          <h1 ref="heading">Heading</h1>
+          <a href="" ref="link">Link</a>
+      </template>
+      <script setup>
+        import { ref,useTemplateRef } from 'vue';
+        const heading = useTemplateRef('heading');
+        const link = useTemplateRef('link');
+      </script>
+      `,
       errors: [
         {
           messageId: 'preferUseTemplateRef',
@@ -351,6 +382,22 @@ tester.run('prefer-use-template-ref', rule, {
         }
       </script>
       `,
+      output: `
+      <template>
+        <p>Button clicked {{counter}} times.</p>
+        <button ref="button">Click</button>
+      </template>
+      <script>
+        import { ref,useTemplateRef } from 'vue';
+        export default {
+          name: 'Counter',
+          setup() {
+            const counter = ref(0);
+            const button = useTemplateRef('button');
+          }
+        }
+      </script>
+      `,
       errors: [
         {
           messageId: 'preferUseTemplateRef',
@@ -373,6 +420,15 @@ tester.run('prefer-use-template-ref', rule, {
         const root = shallowRef();
       </script>
       `,
+      output: `
+      <template>
+          <div ref="root"/>
+      </template>
+      <script setup>
+        import { shallowRef,useTemplateRef } from 'vue';
+        const root = useTemplateRef('root');
+      </script>
+      `,
       errors: [
         {
           messageId: 'preferUseTemplateRef',
@@ -383,6 +439,102 @@ tester.run('prefer-use-template-ref', rule, {
           column: 22
         }
       ]
+    },
+    {
+      filename: 'missing-import.vue',
+      code: `
+      <template>
+        <p>Button clicked {{counter}} times.</p>
+        <button ref="button">Click</button>
+      </template>
+      <script>
+        import { isEqual } from 'lodash';
+        export default {
+          name: 'Counter',
+          setup() {
+            const counter = ref(0);
+            if (isEqual(counter.value, 0)) {
+              console.log('Counter is reset');
+            }
+            const button = ref();
+          }
+        }
+      </script>
+      `,
+      output: `
+      <template>
+        <p>Button clicked {{counter}} times.</p>
+        <button ref="button">Click</button>
+      </template>
+      <script>
+        import { isEqual } from 'lodash';
+        import {useTemplateRef} from 'vue';
+        export default {
+          name: 'Counter',
+          setup() {
+            const counter = ref(0);
+            if (isEqual(counter.value, 0)) {
+              console.log('Counter is reset');
+            }
+            const button = useTemplateRef('button');
+          }
+        }
+      </script>
+      `,
+      errors: [
+        {
+          messageId: 'preferUseTemplateRef',
+          data: {
+            name: 'ref'
+          },
+          line: 15,
+          column: 28
+        }
+      ]
+    },
+    {
+      filename: 'no-imports.vue',
+      code: `
+      <template>
+        <p>Button clicked {{counter}} times.</p>
+        <button ref="button">Click</button>
+      </template>
+      <script>
+        export default {
+          name: 'Counter',
+          setup() {
+            const counter = ref(0);
+            const button = ref();
+          }
+        }
+      </script>
+      `,
+      output: `
+      <template>
+        <p>Button clicked {{counter}} times.</p>
+        <button ref="button">Click</button>
+      </template>
+      <script>
+        import {useTemplateRef} from 'vue';
+        export default {
+          name: 'Counter',
+          setup() {
+            const counter = ref(0);
+            const button = useTemplateRef('button');
+          }
+        }
+      </script>
+      `,
+      errors: [
+        {
+          messageId: 'preferUseTemplateRef',
+          data: {
+            name: 'ref'
+          },
+          line: 11,
+          column: 28
+        }
+      ]
     }
   ]
 })

From d7331ac63ea9f0bb0580001570e580ee60f6859e Mon Sep 17 00:00:00 2001
From: Thomasan1999 <ahoj@tomaskudlac.sk>
Date: Sat, 30 Nov 2024 12:27:28 +0100
Subject: [PATCH 2/7] make it compatible with Node.js v14

---
 lib/rules/prefer-use-template-ref.js |  6 ++++--
 lib/utils/index.js                   | 10 ++++++++++
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/lib/rules/prefer-use-template-ref.js b/lib/rules/prefer-use-template-ref.js
index 16e6f866c..e2dcc24f9 100644
--- a/lib/rules/prefer-use-template-ref.js
+++ b/lib/rules/prefer-use-template-ref.js
@@ -75,13 +75,15 @@ function addUseTemplateRefImport(context, fixer) {
   )
 
   if (vueDestructuredImport) {
-    const importSpecifierLast = vueDestructuredImport.specifiers.at(-1)
+    const importSpecifierLast = utils.getLastArrayElement(
+      vueDestructuredImport.specifiers
+    )
 
     // @ts-ignore
     return fixer.insertTextAfter(importSpecifierLast, `,useTemplateRef`)
   }
 
-  const lastImport = imports.at(-1)
+  const lastImport = utils.getLastArrayElement(imports)
 
   const importStatement = "import {useTemplateRef} from 'vue';"
 
diff --git a/lib/utils/index.js b/lib/utils/index.js
index 167edf208..ace71b919 100644
--- a/lib/utils/index.js
+++ b/lib/utils/index.js
@@ -2208,6 +2208,16 @@ module.exports = {
       (token, i) =>
         token.type === tokensR[i].type && token.value === tokensR[i].value
     )
+  },
+
+  /**
+   * TODO: replace usages with 'array.at(-1)' once the minimum supported Node.js version is at least 16.6.0
+   * @template T
+   * @param array {T[]}
+   * @returns {T | undefined}
+   * */
+  getLastArrayElement(array) {
+    return array[array.length - 1]
   }
 }
 

From 00c9c0e748a9e106b511b36f6f2341b708c10840 Mon Sep 17 00:00:00 2001
From: Thomasan1999 <ahoj@tomaskudlac.sk>
Date: Sat, 30 Nov 2024 12:40:36 +0100
Subject: [PATCH 3/7] make it compatible with ESLint <v8

---
 lib/rules/prefer-use-template-ref.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/rules/prefer-use-template-ref.js b/lib/rules/prefer-use-template-ref.js
index e2dcc24f9..1aac8f0f8 100644
--- a/lib/rules/prefer-use-template-ref.js
+++ b/lib/rules/prefer-use-template-ref.js
@@ -56,7 +56,7 @@ function createIndent(node) {
  *  @param fixer {RuleFixer}
  * */
 function addUseTemplateRefImport(context, fixer) {
-  const sourceCode = context.sourceCode
+  const sourceCode = context.getSourceCode()
 
   if (!sourceCode) {
     return

From 7db13827e7204365bd31547d6fb7c049ddaa41ae Mon Sep 17 00:00:00 2001
From: Thomasan1999 <ahoj@tomaskudlac.sk>
Date: Sat, 30 Nov 2024 13:04:19 +0100
Subject: [PATCH 4/7] remove util for retrieving the last element of array

---
 lib/rules/prefer-use-template-ref.js |  9 ++++-----
 lib/utils/index.js                   | 10 ----------
 2 files changed, 4 insertions(+), 15 deletions(-)

diff --git a/lib/rules/prefer-use-template-ref.js b/lib/rules/prefer-use-template-ref.js
index 1aac8f0f8..6d07c04ac 100644
--- a/lib/rules/prefer-use-template-ref.js
+++ b/lib/rules/prefer-use-template-ref.js
@@ -75,15 +75,14 @@ function addUseTemplateRefImport(context, fixer) {
   )
 
   if (vueDestructuredImport) {
-    const importSpecifierLast = utils.getLastArrayElement(
-      vueDestructuredImport.specifiers
-    )
+    const importSpecifiers = vueDestructuredImport.specifiers
+    const lastImportSpecifier = importSpecifiers[importSpecifiers.length - 1]
 
     // @ts-ignore
-    return fixer.insertTextAfter(importSpecifierLast, `,useTemplateRef`)
+    return fixer.insertTextAfter(lastImportSpecifier, `,useTemplateRef`)
   }
 
-  const lastImport = utils.getLastArrayElement(imports)
+  const lastImport = imports[imports.length - 1]
 
   const importStatement = "import {useTemplateRef} from 'vue';"
 
diff --git a/lib/utils/index.js b/lib/utils/index.js
index ace71b919..167edf208 100644
--- a/lib/utils/index.js
+++ b/lib/utils/index.js
@@ -2208,16 +2208,6 @@ module.exports = {
       (token, i) =>
         token.type === tokensR[i].type && token.value === tokensR[i].value
     )
-  },
-
-  /**
-   * TODO: replace usages with 'array.at(-1)' once the minimum supported Node.js version is at least 16.6.0
-   * @template T
-   * @param array {T[]}
-   * @returns {T | undefined}
-   * */
-  getLastArrayElement(array) {
-    return array[array.length - 1]
   }
 }
 

From f6aefde5457f0c6421152885904d85228ecba2ee Mon Sep 17 00:00:00 2001
From: Thomasan1999 <ahoj@tomaskudlac.sk>
Date: Sat, 7 Jun 2025 18:42:20 +0200
Subject: [PATCH 5/7] incorporating PR feedback

---
 lib/rules/prefer-use-template-ref.js       |  15 +--
 tests/lib/rules/prefer-use-template-ref.js | 104 +++++++++++++++++++--
 2 files changed, 101 insertions(+), 18 deletions(-)

diff --git a/lib/rules/prefer-use-template-ref.js b/lib/rules/prefer-use-template-ref.js
index 54906961d..da9969350 100644
--- a/lib/rules/prefer-use-template-ref.js
+++ b/lib/rules/prefer-use-template-ref.js
@@ -63,7 +63,6 @@ function addUseTemplateRefImport(context, fixer) {
   }
 
   const body = sourceCode.ast.body
-
   const imports = body.filter((node) => node.type === 'ImportDeclaration')
 
   const vueDestructuredImport = imports.find(
@@ -79,13 +78,12 @@ function addUseTemplateRefImport(context, fixer) {
     const lastImportSpecifier = importSpecifiers[importSpecifiers.length - 1]
 
     // @ts-ignore
-    return fixer.insertTextAfter(lastImportSpecifier, `,useTemplateRef`)
+    return fixer.insertTextAfter(lastImportSpecifier, `, useTemplateRef`)
   }
 
+  const importStatement = "import { useTemplateRef } from 'vue';"
   const lastImport = imports[imports.length - 1]
 
-  const importStatement = "import {useTemplateRef} from 'vue';"
-
   if (lastImport) {
     const indent = createIndent(lastImport)
 
@@ -168,16 +166,11 @@ module.exports = {
                 name: scriptRef.node?.callee?.name
               },
               fix(fixer) {
-                /** @type {Fix[]} */
-                const fixes = []
-
                 const replaceFunctionFix = fixer.replaceText(
                   scriptRef.node,
                   `useTemplateRef('${scriptRef.ref}')`
                 )
 
-                fixes.push(replaceFunctionFix)
-
                 if (!missingImportChecked) {
                   missingImportChecked = true
 
@@ -187,11 +180,11 @@ module.exports = {
                   )
 
                   if (missingImportFix) {
-                    fixes.push(missingImportFix)
+                    return [replaceFunctionFix, missingImportFix]
                   }
                 }
 
-                return fixes
+                return replaceFunctionFix
               }
             })
           }
diff --git a/tests/lib/rules/prefer-use-template-ref.js b/tests/lib/rules/prefer-use-template-ref.js
index 3fd6a3d4d..7ac3d11a4 100644
--- a/tests/lib/rules/prefer-use-template-ref.js
+++ b/tests/lib/rules/prefer-use-template-ref.js
@@ -316,7 +316,7 @@ tester.run('prefer-use-template-ref', rule, {
           <div ref="root"/>
       </template>
       <script setup>
-        import { ref,useTemplateRef } from 'vue';
+        import { ref, useTemplateRef } from 'vue';
         const root = useTemplateRef('root');
       </script>
       `,
@@ -350,7 +350,7 @@ tester.run('prefer-use-template-ref', rule, {
           <a href="" ref="link">Link</a>
       </template>
       <script setup>
-        import { ref,useTemplateRef } from 'vue';
+        import { ref, useTemplateRef } from 'vue';
         const buttonRef = ref();
         const link = useTemplateRef('link');
       </script>
@@ -385,7 +385,7 @@ tester.run('prefer-use-template-ref', rule, {
           <a href="" ref="link">Link</a>
       </template>
       <script setup>
-        import { ref,useTemplateRef } from 'vue';
+        import { ref, useTemplateRef } from 'vue';
         const heading = useTemplateRef('heading');
         const link = useTemplateRef('link');
       </script>
@@ -433,7 +433,7 @@ tester.run('prefer-use-template-ref', rule, {
         <button ref="button">Click</button>
       </template>
       <script>
-        import { ref,useTemplateRef } from 'vue';
+        import { ref, useTemplateRef } from 'vue';
         export default {
           name: 'Counter',
           setup() {
@@ -470,7 +470,7 @@ tester.run('prefer-use-template-ref', rule, {
           <div ref="root"/>
       </template>
       <script setup>
-        import { shallowRef,useTemplateRef } from 'vue';
+        import { shallowRef, useTemplateRef } from 'vue';
         const root = useTemplateRef('root');
       </script>
       `,
@@ -500,6 +500,19 @@ tester.run('prefer-use-template-ref', rule, {
         }
       </script>
       `,
+      output: `
+      <template>
+        <button ref="button">Click</button>
+      </template>
+      <script>
+        import { ref, useTemplateRef } from 'vue';
+        export default {
+          setup: () => {
+            const button = useTemplateRef('button');
+          }
+        }
+      </script>
+      `,
       errors: [
         {
           messageId: 'preferUseTemplateRef',
@@ -523,6 +536,20 @@ tester.run('prefer-use-template-ref', rule, {
       const root = ref()
       </script>
 
+      <script>
+      const A = 'foo'
+      </script>
+      `,
+      output: `
+      <template>
+        <div ref="root" :data-a="A" />
+      </template>
+
+      <script setup>
+      import { ref, useTemplateRef } from 'vue'
+      const root = useTemplateRef('root')
+      </script>
+
       <script>
       const A = 'foo'
       </script>
@@ -554,6 +581,20 @@ tester.run('prefer-use-template-ref', rule, {
       const root = ref()
       </script>
       `,
+      output: `
+      <template>
+        <div ref="root" :data-a="A" />
+      </template>
+
+      <script>
+      const A = 'foo'
+      </script>
+
+      <script setup>
+      import { ref, useTemplateRef } from 'vue'
+      const root = useTemplateRef('root')
+      </script>
+      `,
       errors: [
         {
           messageId: 'preferUseTemplateRef',
@@ -593,7 +634,7 @@ tester.run('prefer-use-template-ref', rule, {
       </template>
       <script>
         import { isEqual } from 'lodash';
-        import {useTemplateRef} from 'vue';
+        import { useTemplateRef } from 'vue';
         export default {
           name: 'Counter',
           setup() {
@@ -640,7 +681,7 @@ tester.run('prefer-use-template-ref', rule, {
         <button ref="button">Click</button>
       </template>
       <script>
-        import {useTemplateRef} from 'vue';
+        import { useTemplateRef } from 'vue';
         export default {
           name: 'Counter',
           setup() {
@@ -660,6 +701,55 @@ tester.run('prefer-use-template-ref', rule, {
           column: 28
         }
       ]
+    },
+    {
+      filename: 'script-lang-ts.vue',
+      code: `
+      <template>
+        <p>Button clicked {{counter}} times.</p>
+        <button ref="button">Click</button>
+      </template>
+      <script lang="ts">
+        export default {
+          name: 'Counter',
+          setup() {
+            const counter = ref(0);
+            const button = ref<HTMLDivElement>();
+          }
+        }
+      </script>
+      `,
+      output: `
+      <template>
+        <p>Button clicked {{counter}} times.</p>
+        <button ref="button">Click</button>
+      </template>
+      <script lang="ts">
+        import { useTemplateRef } from 'vue';
+        export default {
+          name: 'Counter',
+          setup() {
+            const counter = ref(0);
+            const button = useTemplateRef('button');
+          }
+        }
+      </script>
+      `,
+      languageOptions: {
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
+      },
+      errors: [
+        {
+          messageId: 'preferUseTemplateRef',
+          data: {
+            name: 'ref'
+          },
+          line: 11,
+          column: 28
+        }
+      ]
     }
   ]
 })

From e1ea60ff584c680e3c982921bc87581399c03d30 Mon Sep 17 00:00:00 2001
From: Thomasan1999 <ahoj@tomaskudlac.sk>
Date: Tue, 10 Jun 2025 20:24:46 +0200
Subject: [PATCH 6/7] incorporating PR feedback #2

---
 docs/rules/index.md                        | 164 ++++++++++-----------
 docs/rules/prefer-use-template-ref.md      |   2 +-
 lib/rules/prefer-use-template-ref.js       |  17 ++-
 tests/lib/rules/prefer-use-template-ref.js |   2 +-
 4 files changed, 98 insertions(+), 87 deletions(-)

diff --git a/docs/rules/index.md b/docs/rules/index.md
index 456d31007..70691eae7 100644
--- a/docs/rules/index.md
+++ b/docs/rules/index.md
@@ -207,90 +207,90 @@ For example:
 
 <rules-table>
 
-| Rule ID | Description |                |    |
-|:--------|:------------|:--------------:|:--:|
-| [vue/block-lang] | disallow use other than available `lang` |                | :hammer: |
-| [vue/block-tag-newline] | enforce line breaks after opening and before closing block-level tags |    :wrench:    | :lipstick: |
-| [vue/component-api-style] | enforce component API style |                | :hammer: |
-| [vue/component-name-in-template-casing] | enforce specific casing for the component naming style in template |    :wrench:    | :hammer: |
+| Rule ID | Description |    |    |
+|:--------|:------------|:--:|:--:|
+| [vue/block-lang] | disallow use other than available `lang` |  | :hammer: |
+| [vue/block-tag-newline] | enforce line breaks after opening and before closing block-level tags | :wrench: | :lipstick: |
+| [vue/component-api-style] | enforce component API style |  | :hammer: |
+| [vue/component-name-in-template-casing] | enforce specific casing for the component naming style in template | :wrench: | :hammer: |
 | [vue/component-options-name-casing] | enforce the casing of component name in `components` options | :wrench::bulb: | :hammer: |
-| [vue/custom-event-name-casing] | enforce specific casing for custom event name |                | :hammer: |
-| [vue/define-emits-declaration] | enforce declaration style of `defineEmits` |                | :hammer: |
+| [vue/custom-event-name-casing] | enforce specific casing for custom event name |  | :hammer: |
+| [vue/define-emits-declaration] | enforce declaration style of `defineEmits` |  | :hammer: |
 | [vue/define-macros-order] | enforce order of compiler macros (`defineProps`, `defineEmits`, etc.) | :wrench::bulb: | :lipstick: |
-| [vue/define-props-declaration] | enforce declaration style of `defineProps` |                | :hammer: |
-| [vue/define-props-destructuring] | enforce consistent style for props destructuring |                | :hammer: |
-| [vue/enforce-style-attribute] | enforce or forbid the use of the `scoped` and `module` attributes in SFC top level style tags |                | :hammer: |
-| [vue/html-button-has-type] | disallow usage of button without an explicit type attribute |                | :hammer: |
-| [vue/html-comment-content-newline] | enforce unified line break in HTML comments |    :wrench:    | :lipstick: |
-| [vue/html-comment-content-spacing] | enforce unified spacing in HTML comments |    :wrench:    | :lipstick: |
-| [vue/html-comment-indent] | enforce consistent indentation in HTML comments |    :wrench:    | :lipstick: |
-| [vue/match-component-file-name] | require component name property to match its file name |     :bulb:     | :hammer: |
-| [vue/match-component-import-name] | require the registered component name to match the imported component name |                | :warning: |
-| [vue/max-lines-per-block] | enforce maximum number of lines in Vue SFC blocks |                | :warning: |
-| [vue/max-props] | enforce maximum number of props in Vue component |                | :warning: |
-| [vue/max-template-depth] | enforce maximum depth of template |                | :warning: |
-| [vue/new-line-between-multi-line-property] | enforce new lines between multi-line properties in Vue components |    :wrench:    | :lipstick: |
-| [vue/next-tick-style] | enforce Promise or callback style in `nextTick` |    :wrench:    | :hammer: |
-| [vue/no-bare-strings-in-template] | disallow the use of bare strings in `<template>` |                | :hammer: |
-| [vue/no-boolean-default] | disallow boolean defaults |                | :hammer: |
-| [vue/no-duplicate-attr-inheritance] | enforce `inheritAttrs` to be set to `false` when using `v-bind="$attrs"` |                | :hammer: |
-| [vue/no-empty-component-block] | disallow the `<template>` `<script>` `<style>` block to be empty |    :wrench:    | :hammer: |
-| [vue/no-import-compiler-macros] | disallow importing Vue compiler macros |    :wrench:    | :warning: |
-| [vue/no-multiple-objects-in-class] | disallow passing multiple objects in an array to class |                | :hammer: |
-| [vue/no-potential-component-option-typo] | disallow a potential typo in your component property |     :bulb:     | :hammer: |
-| [vue/no-ref-object-reactivity-loss] | disallow usages of ref objects that can lead to loss of reactivity |                | :warning: |
-| [vue/no-restricted-block] | disallow specific block |                | :hammer: |
-| [vue/no-restricted-call-after-await] | disallow asynchronously called restricted methods |                | :hammer: |
-| [vue/no-restricted-class] | disallow specific classes in Vue components |                | :warning: |
-| [vue/no-restricted-component-names] | disallow specific component names |     :bulb:     | :hammer: |
-| [vue/no-restricted-component-options] | disallow specific component option |                | :hammer: |
-| [vue/no-restricted-custom-event] | disallow specific custom event |     :bulb:     | :hammer: |
-| [vue/no-restricted-html-elements] | disallow specific HTML elements |                | :hammer: |
-| [vue/no-restricted-props] | disallow specific props |     :bulb:     | :hammer: |
-| [vue/no-restricted-static-attribute] | disallow specific attribute |                | :hammer: |
-| [vue/no-restricted-v-bind] | disallow specific argument in `v-bind` |                | :hammer: |
-| [vue/no-restricted-v-on] | disallow specific argument in `v-on` |                | :hammer: |
-| [vue/no-root-v-if] | disallow `v-if` directives on root element |                | :hammer: |
-| [vue/no-setup-props-reactivity-loss] | disallow usages that lose the reactivity of `props` passed to `setup` |                | :hammer: |
-| [vue/no-static-inline-styles] | disallow static inline `style` attributes |                | :hammer: |
-| [vue/no-template-target-blank] | disallow target="_blank" attribute without rel="noopener noreferrer" |     :bulb:     | :warning: |
-| [vue/no-this-in-before-route-enter] | disallow `this` usage in a `beforeRouteEnter` method |                | :warning: |
-| [vue/no-undef-components] | disallow use of undefined components in `<template>` |                | :hammer: |
-| [vue/no-undef-properties] | disallow undefined properties |                | :hammer: |
-| [vue/no-unsupported-features] | disallow unsupported Vue.js syntax on the specified version |    :wrench:    | :hammer: |
-| [vue/no-unused-emit-declarations] | disallow unused emit declarations |                | :hammer: |
-| [vue/no-unused-properties] | disallow unused properties |                | :hammer: |
-| [vue/no-unused-refs] | disallow unused refs |                | :hammer: |
-| [vue/no-use-v-else-with-v-for] | disallow using `v-else-if`/`v-else` on the same element as `v-for` |                | :hammer: |
-| [vue/no-useless-mustaches] | disallow unnecessary mustache interpolations |    :wrench:    | :hammer: |
-| [vue/no-useless-v-bind] | disallow unnecessary `v-bind` directives |    :wrench:    | :hammer: |
-| [vue/no-v-text] | disallow use of v-text |                | :hammer: |
-| [vue/padding-line-between-blocks] | require or disallow padding lines between blocks |    :wrench:    | :lipstick: |
-| [vue/padding-line-between-tags] | require or disallow newlines between sibling tags in template |    :wrench:    | :lipstick: |
-| [vue/padding-lines-in-component-definition] | require or disallow padding lines in component definition |    :wrench:    | :lipstick: |
-| [vue/prefer-define-options] | enforce use of `defineOptions` instead of default export |    :wrench:    | :hammer: |
-| [vue/prefer-prop-type-boolean-first] | enforce `Boolean` comes first in component prop types |     :bulb:     | :warning: |
-| [vue/prefer-separate-static-class] | require static class names in template to be in a separate `class` attribute |    :wrench:    | :hammer: |
-| [vue/prefer-true-attribute-shorthand] | require shorthand form attribute when `v-bind` value is `true` |     :bulb:     | :hammer: |
-| [vue/prefer-use-template-ref] | require using `useTemplateRef` instead of `ref`/`shallowRef` for template refs |    :wrench:    | :hammer: |
-| [vue/require-default-export] | require components to be the default export |                | :warning: |
-| [vue/require-direct-export] | require the component to be directly exported |                | :hammer: |
-| [vue/require-emit-validator] | require type definitions in emits |     :bulb:     | :hammer: |
-| [vue/require-explicit-slots] | require slots to be explicitly defined |                | :warning: |
-| [vue/require-expose] | require declare public properties using `expose` |     :bulb:     | :hammer: |
-| [vue/require-macro-variable-name] | require a certain macro variable name |     :bulb:     | :hammer: |
-| [vue/require-name-property] | require a name property in Vue components |     :bulb:     | :hammer: |
-| [vue/require-prop-comment] | require props to have a comment |                | :hammer: |
-| [vue/require-typed-object-prop] | enforce adding type declarations to object props |     :bulb:     | :hammer: |
-| [vue/require-typed-ref] | require `ref` and `shallowRef` functions to be strongly typed |                | :hammer: |
-| [vue/restricted-component-names] | enforce using only specific component names |                | :warning: |
-| [vue/script-indent] | enforce consistent indentation in `<script>` |    :wrench:    | :lipstick: |
-| [vue/slot-name-casing] | enforce specific casing for slot names |                | :hammer: |
-| [vue/sort-keys] | enforce sort-keys in a manner that is compatible with order-in-components |                | :hammer: |
-| [vue/static-class-names-order] | enforce static class names order |    :wrench:    | :hammer: |
-| [vue/v-for-delimiter-style] | enforce `v-for` directive's delimiter style |    :wrench:    | :lipstick: |
-| [vue/v-if-else-key] | require key attribute for conditionally rendered repeated components |    :wrench:    | :warning: |
-| [vue/v-on-handler-style] | enforce writing style for handlers in `v-on` directives |    :wrench:    | :hammer: |
+| [vue/define-props-declaration] | enforce declaration style of `defineProps` |  | :hammer: |
+| [vue/define-props-destructuring] | enforce consistent style for props destructuring |  | :hammer: |
+| [vue/enforce-style-attribute] | enforce or forbid the use of the `scoped` and `module` attributes in SFC top level style tags |  | :hammer: |
+| [vue/html-button-has-type] | disallow usage of button without an explicit type attribute |  | :hammer: |
+| [vue/html-comment-content-newline] | enforce unified line break in HTML comments | :wrench: | :lipstick: |
+| [vue/html-comment-content-spacing] | enforce unified spacing in HTML comments | :wrench: | :lipstick: |
+| [vue/html-comment-indent] | enforce consistent indentation in HTML comments | :wrench: | :lipstick: |
+| [vue/match-component-file-name] | require component name property to match its file name | :bulb: | :hammer: |
+| [vue/match-component-import-name] | require the registered component name to match the imported component name |  | :warning: |
+| [vue/max-lines-per-block] | enforce maximum number of lines in Vue SFC blocks |  | :warning: |
+| [vue/max-props] | enforce maximum number of props in Vue component |  | :warning: |
+| [vue/max-template-depth] | enforce maximum depth of template |  | :warning: |
+| [vue/new-line-between-multi-line-property] | enforce new lines between multi-line properties in Vue components | :wrench: | :lipstick: |
+| [vue/next-tick-style] | enforce Promise or callback style in `nextTick` | :wrench: | :hammer: |
+| [vue/no-bare-strings-in-template] | disallow the use of bare strings in `<template>` |  | :hammer: |
+| [vue/no-boolean-default] | disallow boolean defaults |  | :hammer: |
+| [vue/no-duplicate-attr-inheritance] | enforce `inheritAttrs` to be set to `false` when using `v-bind="$attrs"` |  | :hammer: |
+| [vue/no-empty-component-block] | disallow the `<template>` `<script>` `<style>` block to be empty | :wrench: | :hammer: |
+| [vue/no-import-compiler-macros] | disallow importing Vue compiler macros | :wrench: | :warning: |
+| [vue/no-multiple-objects-in-class] | disallow passing multiple objects in an array to class |  | :hammer: |
+| [vue/no-potential-component-option-typo] | disallow a potential typo in your component property | :bulb: | :hammer: |
+| [vue/no-ref-object-reactivity-loss] | disallow usages of ref objects that can lead to loss of reactivity |  | :warning: |
+| [vue/no-restricted-block] | disallow specific block |  | :hammer: |
+| [vue/no-restricted-call-after-await] | disallow asynchronously called restricted methods |  | :hammer: |
+| [vue/no-restricted-class] | disallow specific classes in Vue components |  | :warning: |
+| [vue/no-restricted-component-names] | disallow specific component names | :bulb: | :hammer: |
+| [vue/no-restricted-component-options] | disallow specific component option |  | :hammer: |
+| [vue/no-restricted-custom-event] | disallow specific custom event | :bulb: | :hammer: |
+| [vue/no-restricted-html-elements] | disallow specific HTML elements |  | :hammer: |
+| [vue/no-restricted-props] | disallow specific props | :bulb: | :hammer: |
+| [vue/no-restricted-static-attribute] | disallow specific attribute |  | :hammer: |
+| [vue/no-restricted-v-bind] | disallow specific argument in `v-bind` |  | :hammer: |
+| [vue/no-restricted-v-on] | disallow specific argument in `v-on` |  | :hammer: |
+| [vue/no-root-v-if] | disallow `v-if` directives on root element |  | :hammer: |
+| [vue/no-setup-props-reactivity-loss] | disallow usages that lose the reactivity of `props` passed to `setup` |  | :hammer: |
+| [vue/no-static-inline-styles] | disallow static inline `style` attributes |  | :hammer: |
+| [vue/no-template-target-blank] | disallow target="_blank" attribute without rel="noopener noreferrer" | :bulb: | :warning: |
+| [vue/no-this-in-before-route-enter] | disallow `this` usage in a `beforeRouteEnter` method |  | :warning: |
+| [vue/no-undef-components] | disallow use of undefined components in `<template>` |  | :hammer: |
+| [vue/no-undef-properties] | disallow undefined properties |  | :hammer: |
+| [vue/no-unsupported-features] | disallow unsupported Vue.js syntax on the specified version | :wrench: | :hammer: |
+| [vue/no-unused-emit-declarations] | disallow unused emit declarations |  | :hammer: |
+| [vue/no-unused-properties] | disallow unused properties |  | :hammer: |
+| [vue/no-unused-refs] | disallow unused refs |  | :hammer: |
+| [vue/no-use-v-else-with-v-for] | disallow using `v-else-if`/`v-else` on the same element as `v-for` |  | :hammer: |
+| [vue/no-useless-mustaches] | disallow unnecessary mustache interpolations | :wrench: | :hammer: |
+| [vue/no-useless-v-bind] | disallow unnecessary `v-bind` directives | :wrench: | :hammer: |
+| [vue/no-v-text] | disallow use of v-text |  | :hammer: |
+| [vue/padding-line-between-blocks] | require or disallow padding lines between blocks | :wrench: | :lipstick: |
+| [vue/padding-line-between-tags] | require or disallow newlines between sibling tags in template | :wrench: | :lipstick: |
+| [vue/padding-lines-in-component-definition] | require or disallow padding lines in component definition | :wrench: | :lipstick: |
+| [vue/prefer-define-options] | enforce use of `defineOptions` instead of default export | :wrench: | :hammer: |
+| [vue/prefer-prop-type-boolean-first] | enforce `Boolean` comes first in component prop types | :bulb: | :warning: |
+| [vue/prefer-separate-static-class] | require static class names in template to be in a separate `class` attribute | :wrench: | :hammer: |
+| [vue/prefer-true-attribute-shorthand] | require shorthand form attribute when `v-bind` value is `true` | :bulb: | :hammer: |
+| [vue/prefer-use-template-ref] | require using `useTemplateRef` instead of `ref`/`shallowRef` for template refs | :wrench: | :hammer: |
+| [vue/require-default-export] | require components to be the default export |  | :warning: |
+| [vue/require-direct-export] | require the component to be directly exported |  | :hammer: |
+| [vue/require-emit-validator] | require type definitions in emits | :bulb: | :hammer: |
+| [vue/require-explicit-slots] | require slots to be explicitly defined |  | :warning: |
+| [vue/require-expose] | require declare public properties using `expose` | :bulb: | :hammer: |
+| [vue/require-macro-variable-name] | require a certain macro variable name | :bulb: | :hammer: |
+| [vue/require-name-property] | require a name property in Vue components | :bulb: | :hammer: |
+| [vue/require-prop-comment] | require props to have a comment |  | :hammer: |
+| [vue/require-typed-object-prop] | enforce adding type declarations to object props | :bulb: | :hammer: |
+| [vue/require-typed-ref] | require `ref` and `shallowRef` functions to be strongly typed |  | :hammer: |
+| [vue/restricted-component-names] | enforce using only specific component names |  | :warning: |
+| [vue/script-indent] | enforce consistent indentation in `<script>` | :wrench: | :lipstick: |
+| [vue/slot-name-casing] | enforce specific casing for slot names |  | :hammer: |
+| [vue/sort-keys] | enforce sort-keys in a manner that is compatible with order-in-components |  | :hammer: |
+| [vue/static-class-names-order] | enforce static class names order | :wrench: | :hammer: |
+| [vue/v-for-delimiter-style] | enforce `v-for` directive's delimiter style | :wrench: | :lipstick: |
+| [vue/v-if-else-key] | require key attribute for conditionally rendered repeated components | :wrench: | :warning: |
+| [vue/v-on-handler-style] | enforce writing style for handlers in `v-on` directives | :wrench: | :hammer: |
 
 </rules-table>
 
diff --git a/docs/rules/prefer-use-template-ref.md b/docs/rules/prefer-use-template-ref.md
index ed5699ee8..cfa9a7a88 100644
--- a/docs/rules/prefer-use-template-ref.md
+++ b/docs/rules/prefer-use-template-ref.md
@@ -10,7 +10,7 @@ since: v9.31.0
 
 > require using `useTemplateRef` instead of `ref`/`shallowRef` for template refs
 
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
 
 ## :book: Rule Details
 
diff --git a/lib/rules/prefer-use-template-ref.js b/lib/rules/prefer-use-template-ref.js
index da9969350..d0a16600e 100644
--- a/lib/rules/prefer-use-template-ref.js
+++ b/lib/rules/prefer-use-template-ref.js
@@ -8,7 +8,7 @@ const utils = require('../utils')
 
 /**
  * @typedef ScriptRef
- * @type {{node: Expression, ref: string}}
+ * @type {{node: Expression, ref: string, typeArguments?: string[]}}
  */
 
 /**
@@ -20,7 +20,15 @@ function convertDeclaratorToScriptRef(declarator) {
     // @ts-ignore
     node: declarator.init,
     // @ts-ignore
-    ref: declarator.id.name
+    ref: declarator.id.name,
+    // @ts-ignore
+    ...(declarator.init?.typeArguments && {
+      // @ts-ignore
+      typeArguments: declarator.init.typeArguments.params.map(
+        // @ts-ignore
+        (param) => param.typeName.name
+      )
+    })
   }
 }
 
@@ -166,9 +174,12 @@ module.exports = {
                 name: scriptRef.node?.callee?.name
               },
               fix(fixer) {
+                const typeArgumentsString = scriptRef.typeArguments
+                  ? `<${scriptRef.typeArguments.join(', ')}>`
+                  : ''
                 const replaceFunctionFix = fixer.replaceText(
                   scriptRef.node,
-                  `useTemplateRef('${scriptRef.ref}')`
+                  `useTemplateRef${typeArgumentsString}('${scriptRef.ref}')`
                 )
 
                 if (!missingImportChecked) {
diff --git a/tests/lib/rules/prefer-use-template-ref.js b/tests/lib/rules/prefer-use-template-ref.js
index 7ac3d11a4..bfad78dde 100644
--- a/tests/lib/rules/prefer-use-template-ref.js
+++ b/tests/lib/rules/prefer-use-template-ref.js
@@ -730,7 +730,7 @@ tester.run('prefer-use-template-ref', rule, {
           name: 'Counter',
           setup() {
             const counter = ref(0);
-            const button = useTemplateRef('button');
+            const button = useTemplateRef<HTMLDivElement>('button');
           }
         }
       </script>

From ff2ba972b700f6906e063b3e86bfcb9f292ed467 Mon Sep 17 00:00:00 2001
From: Flo Edelmann <git@flo-edelmann.de>
Date: Wed, 11 Jun 2025 09:36:38 +0200
Subject: [PATCH 7/7] Add changeset

---
 .changeset/cool-cycles-lick.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/cool-cycles-lick.md

diff --git a/.changeset/cool-cycles-lick.md b/.changeset/cool-cycles-lick.md
new file mode 100644
index 000000000..b2903faa5
--- /dev/null
+++ b/.changeset/cool-cycles-lick.md
@@ -0,0 +1,5 @@
+---
+"eslint-plugin-vue": minor
+---
+
+Added autofix to [vue/prefer-use-template-ref](https://eslint.vuejs.org/rules/prefer-use-template-ref.html).