Fix detect Nuxt3 defineNuxtComponent (#2311)

vuejs · Nov 27, 2024 · d27c7e6 · d27c7e6
1 parent 618f49c
commit d27c7e6
Show file tree

Hide file tree

Showing 4 changed files with 110 additions and 3 deletions.
diff --git a/lib/utils/index.js b/lib/utils/index.js
@@ -1581,7 +1581,7 @@ module.exports = {
    * Get the Vue component definition type from given node
    * Vue.component('xxx', {}) || component('xxx', {})
    * @param {ObjectExpression} node Node to check
-   * @returns {'component' | 'mixin' | 'extend' | 'createApp' | 'defineComponent' | null}
+   * @returns {'component' | 'mixin' | 'extend' | 'createApp' | 'defineComponent' | 'defineNuxtComponent' | null}
    */
   getVueComponentDefinitionType,
   /**
@@ -2755,7 +2755,7 @@ function isVueComponentFile(node, path) {
  * Get the Vue component definition type from given node
  * Vue.component('xxx', {}) || component('xxx', {})
  * @param {ObjectExpression} node Node to check
- * @returns {'component' | 'mixin' | 'extend' | 'createApp' | 'defineComponent' | null}
+ * @returns {'component' | 'mixin' | 'extend' | 'createApp' | 'defineComponent' | 'defineNuxtComponent' | null}
  */
 function getVueComponentDefinitionType(node) {
   const parent = getParent(node)
@@ -2811,6 +2811,12 @@ function getVueComponentDefinitionType(node) {
         const isDestructedVueComponent = isObjectArgument(parent)
         return isDestructedVueComponent ? 'defineComponent' : null
       }
+      if (callee.name === 'defineNuxtComponent') {
+        // for Nuxt 3.x
+        // defineNuxtComponent({})
+        const isDestructedVueComponent = isObjectArgument(parent)
+        return isDestructedVueComponent ? 'defineNuxtComponent' : null
+      }
     }
   }
 
@@ -2955,7 +2961,9 @@ function isSFCObject(context, node) {
         }
         const { callee } = parent
         if (
-          (callee.type === 'Identifier' && callee.name === 'defineComponent') ||
+          (callee.type === 'Identifier' &&
+            (callee.name === 'defineComponent' ||
+              callee.name === 'defineNuxtComponent')) ||
           (callee.type === 'MemberExpression' &&
             callee.object.type === 'Identifier' &&
             callee.object.name === 'Vue' &&

diff --git a/tests/lib/rules/no-undef-components.js b/tests/lib/rules/no-undef-components.js
@@ -269,6 +269,21 @@ tester.run('no-undef-components', rule, {
         }
       ]
     },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <CustomComponent />
+        </template>
+        <script>
+        export default defineNuxtComponent({
+          components: {
+            CustomComponent
+          }
+        })
+        </script>
+      `
+    },
     {
       filename: 'test.vue',
       code: `

diff --git a/tests/lib/rules/order-in-components.js b/tests/lib/rules/order-in-components.js
@@ -234,6 +234,84 @@ ruleTester.run('order-in-components', rule, {
         }
       ]
     },
+    {
+      filename: 'test.vue',
+      code: `
+        import { defineComponent } from 'vue'
+        export default defineComponent({
+          name: 'app',
+          data () {
+            return {
+              msg: 'Welcome to Your Vue.js App'
+            }
+          },
+          props: {
+            propA: Number,
+          },
+        })
+      `,
+      output: `
+        import { defineComponent } from 'vue'
+        export default defineComponent({
+          name: 'app',
+          props: {
+            propA: Number,
+          },
+          data () {
+            return {
+              msg: 'Welcome to Your Vue.js App'
+            }
+          },
+        })
+      `,
+      languageOptions,
+      errors: [
+        {
+          message:
+            'The "props" property should be above the "data" property on line 5.',
+          line: 10
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        import { defineNuxtComponent } from '#app'
+        export default defineNuxtComponent({
+          name: 'app',
+          data () {
+            return {
+              msg: 'Welcome to Your Vue.js App'
+            }
+          },
+          props: {
+            propA: Number,
+          },
+        })
+      `,
+      output: `
+        import { defineNuxtComponent } from '#app'
+        export default defineNuxtComponent({
+          name: 'app',
+          props: {
+            propA: Number,
+          },
+          data () {
+            return {
+              msg: 'Welcome to Your Vue.js App'
+            }
+          },
+        })
+      `,
+      languageOptions,
+      errors: [
+        {
+          message:
+            'The "props" property should be above the "data" property on line 5.',
+          line: 10
+        }
+      ]
+    },
     {
       filename: 'test.jsx',
       code: `

diff --git a/tests/lib/utils/vue-component.js b/tests/lib/utils/vue-component.js
@@ -325,6 +325,12 @@ function invalidTests(ext) {
       code: `export default defineComponent({})`,
       languageOptions,
       errors: [makeError(1)]
+    },
+    {
+      filename: `test.${ext}`,
+      code: `export default defineNuxtComponent({})`,
+      languageOptions,
+      errors: [makeError(1)]
     }
   ]
 }