Detect Undefined Properties in Vue Templates with ESLint (vue/no-undef-properties)

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.

---