vuejs · FloEdelmann · Nov 18, 2024 · Nov 15, 2024 · Nov 16, 2024
diff --git a/docs/rules/prefer-use-template-ref.md b/docs/rules/prefer-use-template-ref.md
@@ -2,31 +2,32 @@
 pageClass: rule-details
 sidebarDepth: 0
 title: vue/prefer-use-template-ref
-description: require using `useTemplateRef` instead of `ref` for template refs
+description: require using `useTemplateRef` instead of `ref/shallowRef` for template refs
 since: v9.31.0
 ---

 # vue/prefer-use-template-ref

-> require using `useTemplateRef` instead of `ref` for template refs
+> require using `useTemplateRef` instead of `ref/shallowRef` for template refs

 ## :book: Rule Details

 Vue 3.5 introduced a new way of obtaining template refs via
 the [`useTemplateRef()`](https://vuejs.org/guide/essentials/template-refs.html#accessing-the-refs) API.

-This rule enforces using the new `useTemplateRef` function instead of `ref` for template refs.
+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']}">

 ```vue
 <template>
  <button ref="submitRef">Submit</button>
+  <button ref="cancelRef">Cancel</button>
  <button ref="closeRef">Close</button>
 </template>

 <script setup>
-  import { ref, useTemplateRef } from 'vue';
+  import { ref, shallowRef, useTemplateRef } from 'vue';

  /* ✓ GOOD */
  const submitRef = useTemplateRef('submitRef');
@@ -35,6 +36,7 @@ This rule enforces using the new `useTemplateRef` function instead of `ref` for

  /* ✗ BAD */
  const closeRef = ref();
+  const cancelRef = shallowRef();
 </script>
 ```

@@ -47,14 +49,16 @@ This rule skips `ref` template function refs as these should be used to allow cu

 ```vue
 <template>
-  <button :ref="ref => button = ref">Content</button>
+  <button :ref="ref => submitRef = ref">Submit</button>
+  <button :ref="ref => cancelRef = ref">Cancel</button>
 </template>

 <script setup>
-  import { ref } from 'vue';
+  import { ref, shallowRef } from 'vue';

  /* ✓ GOOD */
-  const button = ref();
+  const submitRef = ref();
+  const cancelRef = shallowRef();
 </script>
 ```


diff --git a/lib/rules/prefer-use-template-ref.js b/lib/rules/prefer-use-template-ref.js
@@ -8,8 +8,12 @@ const utils = require('../utils')

 /** @param expression {Expression | null} */
 function expressionIsRef(expression) {
-  // @ts-ignore
-  return expression?.callee?.name === 'ref'
+  return (
+    // @ts-ignore
+    expression?.callee?.name === 'ref' ||
+    // @ts-ignore
+    expression?.callee?.name === 'shallowRef'
+  )
 }

 /** @type {import("eslint").Rule.RuleModule} */
@@ -18,13 +22,13 @@ module.exports = {
    type: 'suggestion',
    docs: {
      description:
-        'require using `useTemplateRef` instead of `ref` for template refs',
+        'require using `useTemplateRef` instead of `ref/shallowRef` for template refs',
      categories: undefined,
      url: 'https://eslint.vuejs.org/rules/prefer-use-template-ref.html'
    },
    schema: [],
    messages: {
-      preferUseTemplateRef: "Replace 'ref' with 'useTemplateRef'."
+      preferUseTemplateRef: "Replace 'ref/shallowRef' with 'useTemplateRef'."
    }
  },
  /** @param {RuleContext} context */
@@ -46,7 +50,10 @@ module.exports = {
        context,
        {
          'VAttribute[directive=false]'(node) {
-            if (node.key.name === 'ref' && node.value?.value) {
+            if (
+              (node.key.name === 'ref' || node.key.name === 'shallowRef') &&
+              node.value?.value
+            ) {
              templateRefs.add(node.value.value)
            }
          }

diff --git a/tests/lib/rules/prefer-use-template-ref.js b/tests/lib/rules/prefer-use-template-ref.js
@@ -318,6 +318,25 @@ tester.run('prefer-use-template-ref', rule, {
          column: 28
        }
      ]
+    },
+    {
+      filename: 'single-shallowRef.vue',
+      code: `
+      <template>
+          <div ref="root"/>
+      </template>
+      <script setup>
+        import { shallowRef } from 'vue';
+        const root = shallowRef();
+      </script>
+      `,
+      errors: [
+        {
+          messageId: 'preferUseTemplateRef',
+          line: 7,
+          column: 22
+        }
+      ]
    }
  ]
 })