{"id":11049,"library":"html-validate-vue","title":"HTML-Validate Vue.js Plugin","description":"html-validate-vue is an official plugin for HTML-Validate, designed to extend its robust, offline HTML5 validation capabilities to Vue.js projects. Currently at stable version 8.2.0, the package generally aligns its major releases with html-validate, which typically maintains major versions for about two years, encouraging users to stay updated for critical bug fixes and new features. The plugin seamlessly integrates by transforming Vue Single File Components (SFCs) and raw template strings, ensuring that Vue-specific syntax is correctly parsed and validated. A key differentiator is its ability to augment HTML-Validate's element metadata, enabling component-aware linting for standard Vue components like `<component>`, `<slot>`, `<transition>`, and `<router-link>`, as well as custom user-defined components. It also introduces specialized Vue-centric rules for validating slot usage (e.g., `vue/available-slots`, `vue/required-slots`), promoting best practices and identifying deprecated patterns within Vue templates. This allows for strict and non-forgiving local validation, providing consistent feedback without relying on online services or runtime checks, which is particularly beneficial for maintaining high code quality in component-driven architectures.","status":"active","version":"8.2.0","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","html","lint","html-validate","vue"],"install":[{"cmd":"npm install html-validate-vue","lang":"bash","label":"npm"},{"cmd":"yarn add html-validate-vue","lang":"bash","label":"yarn"},{"cmd":"pnpm add html-validate-vue","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core HTML validation engine; html-validate-vue extends its functionality.","package":"html-validate","optional":false}],"imports":[{"note":"The plugin is loaded via configuration strings in .htmlvalidate.json (or similar config files) rather than direct JavaScript `import` statements by end-users. The package registers itself and its transforms with the html-validate core.","symbol":"html-validate-vue","correct":"{\n  \"plugins\": [\"html-validate-vue\"],\n  \"transform\": {\n    \"^.*\\\\.vue$\": \"html-validate-vue\"\n  }\n}"},{"note":"Explicitly specifies the Single File Component (SFC) transformer. Useful when `html-validate-vue:auto` might misinterpret a file or when precise control over the transform is needed. Other named transforms include `:auto`, `:js`, and `:html`.","symbol":"html-validate-vue:sfc","correct":"{\n  \"transform\": {\n    \"^.*\\\\.vue$\": \"html-validate-vue:sfc\"\n  }\n}"},{"note":"Extends the recommended configuration for Vue.js specific rules and element metadata provided by the plugin. This is added to the `extends` array in `.htmlvalidate.json`.","symbol":"html-validate-vue:recommended","correct":"{\n  \"extends\": [\"html-validate:recommended\", \"html-validate-vue:recommended\"]\n}"}],"quickstart":{"code":"npm install --save-dev html-validate html-validate-vue\n\n// .htmlvalidate.json\n// Place this file in your project root.\n{\n  \"plugins\": [\"html-validate-vue\"],\n  \"extends\": [\n    \"html-validate:recommended\",\n    \"html-validate-vue:recommended\"\n  ],\n  \"elements\": [\"html5\"],\n  \"transform\": {\n    \"^.*\\\\.vue$\": \"html-validate-vue\"\n  }\n}\n\n// Example Vue Single File Component (src/MyComponent.vue)\n// This component would be validated by html-validate-vue\n// (No actual JavaScript execution here, just demonstrating setup)\n/*\n<template>\n  <section>\n    <h1>Welcome</h1>\n    <my-button>\n      <template #default>\n        Click me\n      </template>\n    </my-button>\n  </section>\n</template>\n\n<script>\nimport MyButton from './MyButton.vue';\nexport default {\n  components: { MyButton },\n};\n</script>\n\n<style scoped>\n/* Your styles here */\n</style>\n*/\n","lang":"typescript","description":"Demonstrates the installation of `html-validate` and `html-validate-vue`, and the essential `.htmlvalidate.json` configuration to enable Vue SFC validation in a project."},"warnings":[{"fix":"Upgrade your Node.js environment to version 20 or newer. Check `engines` field in `package.json` for specific requirements.","message":"html-validate-vue v8.x, aligning with its peer dependency html-validate v8.x, requires Node.js v20 or later. Running on older Node.js versions will result in installation or runtime failures.","severity":"breaking","affected_versions":">=8.0.0"},{"fix":"If referencing local plugins or configurations in CJS, explicitly add `.js` or `.cjs` extensions. For example, change `\"plugins\": [\"./my-plugin\"]` to `\"plugins\": [\"./my-plugin/index.js\"]`. Consider migrating to ESM if feasible.","message":"When upgrading the peer dependency `html-validate` to v9 or later, projects using CommonJS (CJS) might encounter `ERR_UNSUPPORTED_DIR_IMPORT` errors. `html-validate` v9 defaults to ESM, requiring explicit file extensions for local plugin paths in configuration files.","severity":"breaking","affected_versions":"html-validate@>=9.0.0"},{"fix":"Ensure the `transform` regex matches your Vue files (e.g., `^.*\\\\.vue$`) and consider explicitly specifying a named transform like `\"html-validate-vue:sfc\"` if the `auto` detection is insufficient.","message":"Incorrect configuration of the `transform` property in `.htmlvalidate.json` can lead to Vue templates not being validated or being parsed incorrectly. The plugin offers specific named transformers (`html-validate-vue:auto`, `:js`, `:html`, `:sfc`).","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Ensure `html-validate` is installed as a `devDependency` or `dependency` and its version meets the peer dependency requirements of `html-validate-vue`.","message":"html-validate-vue has a peer dependency on `html-validate`. If `html-validate` is not installed or its version is outside the supported range (`^8.21.0 || ^9.0.0 || ^10.0.0`), the plugin will fail to load or operate correctly.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Follow the `${component}#${slot}` pattern for keys when defining metadata for component slots in your `elements.json` or inline configuration.","message":"Defining custom element metadata for specific component slots requires a precise `component#slot` syntax (e.g., `my-component#heading`). Deviating from this delimiter will prevent slot-specific rules from being applied.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Run `npm install html-validate` or `yarn add html-validate` in your project.","cause":"The peer dependency `html-validate` is not installed or cannot be resolved by the system.","error":"Error: Cannot find module 'html-validate' from '.../node_modules/html-validate-vue'"},{"fix":"Verify the regular expression in your `transform` configuration (e.g., `\"^.*\\\\.vue$\": \"html-validate-vue\"`) or explicitly use a named transform like `\"html-validate-vue:sfc\"`.","cause":"The `transform` configuration in `.htmlvalidate.json` does not match the file path, preventing the Vue transformer from being applied.","error":"Error: No transform found for \"src/MyComponent.vue\" (tried: ...)"},{"fix":"Add the missing required slot to your component usage, e.g., `<my-component><template #body>...</template></my-component>`.","cause":"The `vue/required-slots` rule detected that a required slot (`body` in this case) was not provided when using a component.","error":"Element <my-component> is missing required slot 'body'"},{"fix":"Explicitly reference the entry file for local plugins, e.g., change `\"plugins\": [\"./my-local-plugin\"]` to `\"plugins\": [\"./my-local-plugin/index.js\"]` in your `.htmlvalidate.json`.","cause":"Occurs when `html-validate` v9+ is used in a CommonJS project, attempting to import a directory as a plugin instead of an explicit file.","error":"Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import '.../my-local-plugin' is not supported resolving ES modules"}],"ecosystem":"npm"}