{"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,"search_vec":"'1.1.0':27 '2':72 '2.0':12 '2019':30 '3':76 'altern':46 'cadenc':34 'compil':10,22,56,62 'compon':43 'css':37,38 'current':23 'depend':66 'function':17,42 'hmr':40 'html':13 'incompat':73 'javascript':77 'june':29 'lighter':45 'loader':4,6,50,81 'low':32 'modul':39 'need':54 'note':57 'peer':65 'pre':9 'pre-compil':8 'releas':28,33 'render':16 'requir':58 'scope':36 'specif':69 'stabl':24 'support':35 'templat':3,14,21,55,61,80 'use':18 'version':25 'vue':2,20,49,60,71,75 'vue-load':48 'vue-template-compil':19,59 'vue-template-load':1 'vue.js':11,78 'webpack':5,79","created_at":"2026-04-25T11:24:29.589185+00:00","updated_at":"2026-04-25T11:24:29.589185+00:00","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,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/ktsn/vue-template-loader","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/vue-template-loader","openapi_spec":null,"status_page":null,"smithery":null,"categories":["web-framework"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-24","install_tag":null}}