Vue Template Validator

1.1.5 · abandoned · verified Sun Apr 19

Vue Template Validator is an archival utility designed to catch common syntax errors in Vue.js templates at compile time. It operates by analyzing template strings to identify malformed syntax. The package's last update was over 10 years ago, with its most recent official version being 1.1.5. Due to its age and lack of maintenance, it is not compatible with modern Vue.js versions (Vue 2.x, Vue 3.x, or the Composition API) and is largely superseded by contemporary build tools and linters like ESLint with `eslint-plugin-vue`. Its release cadence was sporadic and has ceased entirely. Key differentiators at the time of its development were its focus on compile-time template syntax validation, distinct from runtime form validation libraries.

Common errors

```
TypeError: validate is not a function
```
cause Attempting to use `validate` after an incorrect import, often when using `import` syntax in an ESM project with a CJS-only package.

fix Ensure you are using `const validate = require('vue-template-validator')` for CommonJS environments, as this package does not support ESM.
```
Cannot find module 'vue-template-validator'
```
cause The package is not installed or the module resolution path is incorrect in your environment.

fix Run `npm install vue-template-validator` to ensure the package is installed. Verify your module resolution settings if using a custom build setup.
```
Error: Cannot find module 'parse5' (or similar error related to parse5)
```
cause The peer dependency `parse5` is missing or an incompatible version is installed.

fix Install the correct version of `parse5` that matches the peer dependency requirement (e.g., `npm install parse5@^2.1.0`). However, consider the overall abandonment status of `vue-template-validator`.

Warnings

breaking This package is not compatible with Vue 2.x, Vue 3.x, or modern Vue tooling (e.g., Vue CLI, Vite, Composition API). It was developed for older versions of Vue.js and relies on outdated internal structures.
Fix: For modern Vue.js applications, use official Vue tooling for template linting, such as ESLint with `eslint-plugin-vue`.
gotcha The package is abandoned and has not been updated in over 10 years. This means there will be no bug fixes, security updates, or compatibility improvements for newer Node.js versions or JavaScript language features.
Fix: Avoid using this package in new projects. For existing legacy projects, understand the risks of using unmaintained software.
gotcha The functionality provided by `vue-template-validator` for basic template syntax checking is now integrated into or superseded by more robust and actively maintained linting tools like `eslint-plugin-vue`.
Fix: Migrate to `eslint-plugin-vue` for comprehensive template linting and validation in modern Vue applications.
gotcha The package uses `parse5` as a peer dependency with an old version constraint (`^2.1.0`). This might lead to compatibility issues or vulnerabilities with newer `parse5` versions or other dependencies in your project.
Fix: No direct fix is available for this package. It's an indicator of its abandonment and incompatibility with modern dependency ecosystems.

Install

npm install vue-template-validator npm
yarn add vue-template-validator yarn
pnpm add vue-template-validator pnpm

Imports

validate
wrong:
```
import validate from 'vue-template-validator'
```
correct:
```
const validate = require('vue-template-validator')
```
This package is CommonJS-only and does not support ESM imports. Using 'import' will result in an error.

Quickstart

Demonstrates how to import the `validate` function and use it to check a Vue template string for syntax errors, logging any warnings found.

const validate = require('vue-template-validator');

const templateString = `<template>
  <div v-if="isValid">
    <p>Hello World</p>
    <img src="image.jpg" />
  </div>
  <div v-else></div>
</template>

<style>
.container {
  color: blue;
}
</style>

<script>
export default {
  data() {
    return {
      isValid: true
    };
  }
};
</script>`;

const warnings = validate(templateString);

if (warnings.length > 0) {
  console.error('Template validation errors found:');
  warnings.forEach(function (msg) {
    console.error(`- ${msg}`);
  });
} else {
  console.log('Template is valid!');
}

view raw JSON →