Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
module.rules.use
✓ module.exports = { module: { rules: [ { test: /\.html$/, use: 'vue-html-loader' } ] } }
✗ import VueHtmlLoader from 'vue-html-loader';
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.
vue.html (options)
✓ module.exports = { vue: { html: { /* loader options */ } } }
✗ module.exports = { htmlLoader: { /* options */ } }
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.
attrs (query parameter)
✓ { test: /\.html$/, use: 'vue-html-loader?attrs[]=img:src&attrs[]=img:data-src' }
✗ { test: /\.html$/, use: 'vue-html-loader?attrs=img.src' }
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.
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.
const path = require('path');
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.html$/,
use: ['vue-html-loader?root=.', 'html-loader'], // Chaining with html-loader might be necessary for some features
exclude: /index.html/ // Typically exclude main index.html if using HtmlWebpackPlugin
},
{
test: /\.(png|jpe?g|gif|svg)$/i,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[hash].[ext]',
outputPath: 'assets/images',
},
},
],
},
// Note: For actual Vue SFCs, you would use vue-loader and vue-template-compiler
// This example focuses on standalone HTML templates processed by vue-html-loader
]
},
// Example of vue-html-loader specific options (older Webpack config style)
vue: {
html: {
minimize: true, // Example: Enable HTML minimization
// Other options like 'attrs' can be specified here as well for older configs
// e.g., attrs: ['img:src', 'img:data-src']
}
},
// Ensure Webpack 5 Asset Modules are handled correctly alongside older loaders
// For Webpack 5, it's generally recommended to use built-in Asset Modules instead of file-loader/url-loader
// However, for compatibility with vue-html-loader, older loaders might be required.
};
Debug
Known issues
breakingThis 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.fixMigrate 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.
affects: >=1.3.0 (any version past 1.2.4)
gotchaDue 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.fixIf 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.
affects: >=1.0.0
breakingWebpack 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.fixFor 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.
affects: >=1.0.0 (when used with Webpack 5)
gotchaThe 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.fixEnsure `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.
affects: >=1.0.0
Errors
Common errors & fixes
Module build failed: Error: Cannot find module 'vue-html-loader'
The `vue-html-loader` package has not been installed or is not resolvable in your project.
fixRun `npm install --save-dev vue-html-loader` or `yarn add -D vue-html-loader` to install the package.
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.
Webpack is encountering an HTML file but does not have `vue-html-loader` or `html-loader` configured in its rules to process it.
fixAdd a rule to your `webpack.config.js` to handle HTML files using `vue-html-loader`: `{ test: /\.html$/, use: 'vue-html-loader' }`. Assets referenced in HTML (e.g., <img> src) are not being resolved or result in broken paths.
`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.
fixEnsure 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.
Audit
Dependencies
No dependency data recorded yet.