{"id":12496,"library":"vue-html-loader","title":"Vue HTML Loader","description":"The `vue-html-loader` (version 1.2.4) is a Webpack loader specifically designed to process HTML templates for Vue.js applications. It functions as a fork of the generic `html-loader`, adapted to recognize and handle specific Vue template requirements. Its core functionality involves exporting HTML as a string, enabling asset path resolution for elements like `<img>` tags, and supporting optional HTML minimization. The loader also provides configuration options for custom tag-attribute processing and handling 'root-relative' URLs within HTML. However, its last update was in early 2016, indicating it is no longer actively maintained. Due to the significant evolution of both Webpack (v4/v5) and Vue.js (v2/v3, and modern build tools like Vue CLI and Vite), this loader is largely obsolete and incompatible with contemporary Vue development workflows.","status":"abandoned","version":"1.2.4","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/vuejs/vue-html-loader","tags":["javascript"],"install":[{"cmd":"npm install vue-html-loader","lang":"bash","label":"npm"},{"cmd":"yarn add vue-html-loader","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-html-loader","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"This package is a Webpack loader and is configured within `webpack.config.js` via the `module.rules` array, not imported into application code. Ensure it's correctly listed in the `use` array for HTML files.","wrong":"import VueHtmlLoader from 'vue-html-loader';","symbol":"module.rules.use","correct":"module.exports = { module: { rules: [ { test: /\\.html$/, use: 'vue-html-loader' } ] } }"},{"note":"Loader-specific options for `vue-html-loader` are traditionally nested under the `vue.html` property in the Webpack configuration for older Vue Loader setups. For modern Webpack, options would typically be passed directly to the loader in the `use` array.","wrong":"module.exports = { htmlLoader: { /* options */ } }","symbol":"vue.html (options)","correct":"module.exports = { vue: { html: { /* loader options */ } } }"},{"note":"The `attrs` query parameter accepts a space-separated string or an array of `<tag>:<attribute>` combinations to process. Use `attrs=false` to disable all attribute processing.","wrong":"{ test: /\\.html$/, use: 'vue-html-loader?attrs=img.src' }","symbol":"attrs (query parameter)","correct":"{ test: /\\.html$/, use: 'vue-html-loader?attrs[]=img:src&attrs[]=img:data-src' }"}],"quickstart":{"code":"const path = require('path');\n\nmodule.exports = {\n  entry: './src/main.js',\n  output: {\n    path: path.resolve(__dirname, 'dist'),\n    filename: 'bundle.js'\n  },\n  module: {\n    rules: [\n      {\n        test: /\\.html$/,\n        use: ['vue-html-loader?root=.', 'html-loader'], // Chaining with html-loader might be necessary for some features\n        exclude: /index.html/ // Typically exclude main index.html if using HtmlWebpackPlugin\n      },\n      {\n        test: /\\.(png|jpe?g|gif|svg)$/i,\n        use: [\n          {\n            loader: 'file-loader',\n            options: {\n              name: '[name].[hash].[ext]',\n              outputPath: 'assets/images',\n            },\n          },\n        ],\n      },\n      // Note: For actual Vue SFCs, you would use vue-loader and vue-template-compiler\n      // This example focuses on standalone HTML templates processed by vue-html-loader\n    ]\n  },\n  // Example of vue-html-loader specific options (older Webpack config style)\n  vue: {\n    html: {\n      minimize: true, // Example: Enable HTML minimization\n      // Other options like 'attrs' can be specified here as well for older configs\n      // e.g., attrs: ['img:src', 'img:data-src']\n    }\n  },\n  // Ensure Webpack 5 Asset Modules are handled correctly alongside older loaders\n  // For Webpack 5, it's generally recommended to use built-in Asset Modules instead of file-loader/url-loader\n  // However, for compatibility with vue-html-loader, older loaders might be required.\n};\n","lang":"javascript","description":"This `webpack.config.js` snippet demonstrates how to configure `vue-html-loader` to process HTML files, resolve image assets using `file-loader`, and enable optional HTML minimization. It shows both direct loader usage and older `vue` config block options."},"warnings":[{"fix":"Migrate to `vue-loader` for processing `.vue` Single File Components or use `html-loader` (with appropriate configuration) for general HTML files in modern Webpack projects. For Vue 3, consider Vite as a build tool.","message":"This package is explicitly abandoned and has not been updated since 2016. It is severely outdated and will not be compatible with modern Webpack versions (v4, v5, or v6) or Vue.js versions (Vue 2 with `vue-loader` v15+, Vue 3, Vue CLI, or Vite). Using it in new projects or upgrading existing ones is highly discouraged.","severity":"breaking","affected_versions":">=1.3.0 (any version past 1.2.4)"},{"fix":"If migrating from an extremely old Webpack setup, carefully review Webpack's documentation for loader options and syntax changes. It's generally better to migrate away from this loader entirely.","message":"Due to its age, `vue-html-loader` might lack features or have incompatible syntax compared to current Webpack loader options. Configuration methods (like query strings vs. `options` object) have evolved significantly in Webpack.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"For new projects, use Webpack 5's built-in Asset Modules (`type: 'asset/resource'`, `type: 'asset/inline'`) instead of `file-loader` or `url-loader`. For legacy projects, consider maintaining older Webpack versions or rewriting asset handling.","message":"Webpack 5 introduced Asset Modules, which supersede `file-loader`, `url-loader`, and `raw-loader`. `vue-html-loader` was designed to work with these older loaders for asset handling, meaning direct migration to Webpack 5's asset modules may break its functionality.","severity":"breaking","affected_versions":">=1.0.0 (when used with Webpack 5)"},{"fix":"Ensure `file-loader` or `url-loader` (or Webpack 5 Asset Modules for newer projects) are properly configured in `webpack.config.js` for the asset types referenced in your HTML templates.","message":"The loader relies on correct setup of other loaders (e.g., `file-loader` or `url-loader`) for asset processing (e.g., `<img src=\"image.png\">`). If these are not configured or are incompatible, image paths will not be resolved correctly.","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 --save-dev vue-html-loader` or `yarn add -D vue-html-loader` to install the package.","cause":"The `vue-html-loader` package has not been installed or is not resolvable in your project.","error":"Module build failed: Error: Cannot find module 'vue-html-loader'"},{"fix":"Add a rule to your `webpack.config.js` to handle HTML files using `vue-html-loader`: `{ test: /\\.html$/, use: 'vue-html-loader' }`.","cause":"Webpack is encountering an HTML file but does not have `vue-html-loader` or `html-loader` configured in its rules to process it.","error":"Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file."},{"fix":"Ensure your `webpack.config.js` includes rules for image files (e.g., `test: /\\.(png|jpe?g|gif|svg)$/i`) with `file-loader`, `url-loader`, or Webpack 5's built-in Asset Modules (`type: 'asset/resource'`). Also, check the `attrs` option for `vue-html-loader` to ensure it's configured to process the relevant tag-attribute combinations.","cause":"`vue-html-loader` processes asset paths, but the necessary subsequent loaders (like `file-loader` or `url-loader`) or Webpack 5 Asset Modules for handling those assets are missing or misconfigured.","error":"Assets referenced in HTML (e.g., <img> src) are not being resolved or result in broken paths."}],"ecosystem":"npm"}