Registry / web-framework / vue-template-loader

vue-template-loader

library1.1.0jsnpmunverified

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.

web-framework

npm install vue-template-loader

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-TEMPLATE-LOADE

vue-template-loader

web-frameworkjavascriptv1.1.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

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

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

export default function

✓ import withRender from './template.html'

✗ const withRender = require('./template.html')

ESM default export imports the compiled render/inject function.

withRender (injected)

✓ import withRender from './template.html?style=./style.css'

✗ import withRender from './template.html'

Use ?style= query to load scoped styles alongside the template.

webpack rule config

✓ module.exports = { module: { rules: [ { test: /\.html$/, use: 'vue-template-loader' } ] } }

✗ module.exports = { module: { rules: [ { test: /\.html$/, loader: 'vue-template-loader' } ] } }

Use `use` property for loader string; `loader` works but is less common in modern configs.

Shows basic webpack config, a Vue HTML template, and usage of the compiled render function to create a component.

// webpack.config.js module.exports = { module: { rules: [ { test: /\.html$/, use: 'vue-template-loader' } ] } }; // App.vue (if using single file components, otherwise just template.html) // template.html <template> <div>{{ message }}</div> </template> // main.js import Vue from 'vue'; import withRender from './template.html'; const App = withRender({ data() { return { message: 'Hello Vue!' }; } }); new Vue({ render: h => h(App) }).$mount('#app');

Debug

Known issues

breakingIn v1.0.0, the `transformToRequire` option was renamed to `transformAssetUrls`. The old key will cause the option to be silently ignored.

fix

Replace `transformToRequire` with `transformAssetUrls` in loader options.

affects: >=1.0.0

breakingv1.0.0 changed internal dependencies to @vue/component-compiler-utils, which may alter behavior for custom blocks or edge cases.

fix

Test your templates after upgrading. Ensure vue-template-compiler peer dependency matches Vue 2 version.

affects: >=1.0.0

gotchaScoped styles require query syntax `?style=./style.css` and post-loader configuration. Forgetting either will silently fail to apply scoped CSS.

fix

Use `import withRender from './template.html?style=./style.css'` and set `enforce: 'post'` on style loaders that should run after scope injection.

affects: >=0.1.0

deprecatedThis package is primarily for Vue 2; no official support for Vue 3. Vue 3 users should use @vue/compiler-sfc and Vue Loader 16+.

fix

For Vue 3, migrate to vue-loader or use @vue/compiler-sfc directly.

affects: >=0.1.0

gotchaWhen 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.

fix

Add `options: { functional: true }` to the loader rule for functional templates. Use `oneOf` for mixed setups.

affects: >=0.1.0

Errors

Common errors & fixes

Error: Cannot find module 'vue-template-compiler'

Missing peer dependency vue-template-compiler.

fix

npm install vue-template-compiler --save-dev  (ensure version matches your Vue version)

Uncaught TypeError: template is not a function

Using the imported module incorrectly; the default export is a function that injects render into component options.

fix

Use: const Component = withRender({ /* options */ });

Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type.

Webpack is not configured with vue-template-loader for .html files.

fix

Add rule: { test: /\.html$/, use: 'vue-template-loader' } to your webpack config.

[Vue warn]: Failed to mount component: template or render function not defined.

The loader did not inject a render function; possibly missing loader config or incorrect import path.

fix

Verify .html file is processed by vue-template-loader and import path is correct.

Upgrade

Version history

1.1.0latest on npm

Audit

Dependencies

vue-template-compilerrequiredpeer dependency — required to compile Vue 2 templates at runtime; must match project's Vue version exactly

Agent activity

9 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/ktsn/vue-template-loader ↗

packagehttps://www.npmjs.com/package/vue-template-loader ↗