Why ESLint Should Catch Undefined Properties in Vue
Undefined property references in Vue templates often go unnoticed until runtime. While IDEs like VSCode can detect these issues with TypeScript, they don’t enforce them in your CI/CD pipeline. To guarantee full static analysis coverage, you need ESLint to catch these template errors.
Example Problem
A simple Vue component might contain this:
<template>
<button @click="loadForm()">Load Form</button>
</template>
<script lang="ts">
export default {
// loadForm is referenced but never defined
};
</script>
Your IDE may show a type error, but ESLint won’t unless configured properly.
Step 1: Install the ESLint Vue Plugin
The required rule is part of the eslint-plugin-vue
package. Install it using:
npm install --save-dev eslint-plugin-vue
Step 2: Add the Rule to Your ESLint Configuration
Edit your .eslintrc.js
file and include the following:
module.exports = {
root: true,
extends: [
"plugin:vue/vue3-essential",
"@vue/eslint-config-typescript/recommended",
"@vue/eslint-config-prettier"
],
rules: {
"vue/no-undef-properties": "error"
}
};
This ensures that any reference to a non-existent method or data property in your template is flagged as an error.
Optional: Add Related Rules
For broader template validation, consider adding:
"vue/no-unused-properties": "warn",
"vue/no-undef-components": "warn"
- vue/no-unused-properties: Detects component properties that are defined but unused.
- vue/no-undef-components: Detects unregistered components used in templates.
Conclusion
Enabling vue/no-undef-properties
in ESLint brings strict, template-aware validation to your Vue development workflow. It prevents silent failures and improves reliability across the codebase—especially when used in automated checks.