{"id":20697,"library":"vue-template-loader","title":"vue-template-loader","description":"Webpack loader that pre-compiles Vue.js 2.0 HTML templates into render functions using vue-template-compiler. Current stable version is 1.1.0 (released June 2019) with low release cadence. Supports scoped CSS, CSS modules, HMR, and functional components. A lighter alternative to vue-loader when you only need template compilation. Note: requires vue-template-compiler as a peer dependency and is specifically for Vue 2 — incompatible with Vue 3.","status":"maintenance","version":"1.1.0","language":"javascript","source_language":"en","source_url":"https://github.com/ktsn/vue-template-loader","tags":["javascript","vue.js","webpack","template","loader"],"install":[{"cmd":"npm install vue-template-loader","lang":"bash","label":"npm"},{"cmd":"yarn add vue-template-loader","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-template-loader","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency — required to compile Vue 2 templates at runtime; must match project's Vue version exactly","package":"vue-template-compiler","optional":false}],"imports":[{"note":"ESM default export imports the compiled render/inject function.","wrong":"const withRender = require('./template.html')","symbol":"export default function","correct":"import withRender from './template.html'"},{"note":"Use ?style= query to load scoped styles alongside the template.","wrong":"import withRender from './template.html'","symbol":"withRender (injected)","correct":"import withRender from './template.html?style=./style.css'"},{"note":"Use `use` property for loader string; `loader` works but is less common in modern configs.","wrong":"module.exports = { module: { rules: [ { test: /\\.html$/, loader: 'vue-template-loader' } ] } }","symbol":"webpack rule config","correct":"module.exports = { module: { rules: [ { test: /\\.html$/, use: 'vue-template-loader' } ] } }"}],"quickstart":{"code":"// webpack.config.js\nmodule.exports = {\n  module: {\n    rules: [\n      { test: /\\.html$/, use: 'vue-template-loader' }\n    ]\n  }\n};\n\n// App.vue (if using single file components, otherwise just template.html)\n// template.html\n<template>\n  <div>{{ message }}</div>\n</template>\n\n// main.js\nimport Vue from 'vue';\nimport withRender from './template.html';\n\nconst App = withRender({\n  data() {\n    return { message: 'Hello Vue!' };\n  }\n});\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app');","lang":"javascript","description":"Shows basic webpack config, a Vue HTML template, and usage of the compiled render function to create a component."},"warnings":[{"fix":"Replace `transformToRequire` with `transformAssetUrls` in loader options.","message":"In v1.0.0, the `transformToRequire` option was renamed to `transformAssetUrls`. The old key will cause the option to be silently ignored.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Test your templates after upgrading. Ensure vue-template-compiler peer dependency matches Vue 2 version.","message":"v1.0.0 changed internal dependencies to @vue/component-compiler-utils, which may alter behavior for custom blocks or edge cases.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Use `import withRender from './template.html?style=./style.css'` and set `enforce: 'post'` on style loaders that should run after scope injection.","message":"Scoped styles require query syntax `?style=./style.css` and post-loader configuration. Forgetting either will silently fail to apply scoped CSS.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"For Vue 3, migrate to vue-loader or use @vue/compiler-sfc directly.","message":"This package is primarily for Vue 2; no official support for Vue 3. Vue 3 users should use @vue/compiler-sfc and Vue Loader 16+.","severity":"deprecated","affected_versions":">=0.1.0"},{"fix":"Add `options: { functional: true }` to the loader rule for functional templates. Use `oneOf` for mixed setups.","message":"When using functional components, the `functional: true` option must be set in the loader config. Using the loader without this option on a functional template will produce a runtime error.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"npm install vue-template-compiler --save-dev  (ensure version matches your Vue version)","cause":"Missing peer dependency vue-template-compiler.","error":"Error: Cannot find module 'vue-template-compiler'"},{"fix":"Use: const Component = withRender({ /* options */ });","cause":"Using the imported module incorrectly; the default export is a function that injects render into component options.","error":"Uncaught TypeError: template is not a function"},{"fix":"Add rule: { test: /\\.html$/, use: 'vue-template-loader' } to your webpack config.","cause":"Webpack is not configured with vue-template-loader for .html files.","error":"Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type."},{"fix":"Verify .html file is processed by vue-template-loader and import path is correct.","cause":"The loader did not inject a render function; possibly missing loader config or incorrect import path.","error":"[Vue warn]: Failed to mount component: template or render function not defined."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}