script/require-define-component

Require defineComponent() for TypeScript SFC default exports.

Applies to: JS/TS scripts in Vue SFCs; examples show the relevant Options API or script setup form.

Bad

The TypeScript SFC exports a plain Options API object, so its component options do not receive the contextual types supplied by defineComponent().

<script lang="ts">
export default {
  props: { count: Number },
  mounted() {
    console.log(this.count)
  }
}
</script>

Good

Wrapping the object with defineComponent() gives props, emits, this, and the other component options Vue-aware TypeScript checking.

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  props: { count: Number },
  mounted() {
    console.log(this.count)
  }
})
</script>

Configuration (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({}).withVue({
  linter: {
    "preset": "incremental",
    "rules": {
      "script/require-define-component": "error"
    }
  },
});

Then run vp run lint.

Related

• Type and script rules
• All rules
• Source code