{"id":13671308,"url":"https://github.com/ktsn/vue-template-loader","last_synced_at":"2025-04-04T17:10:18.622Z","repository":{"id":65419343,"uuid":"65088847","full_name":"ktsn/vue-template-loader","owner":"ktsn","description":"Vue.js 2.0 template loader for webpack","archived":false,"fork":false,"pushed_at":"2020-03-19T12:43:12.000Z","size":322,"stargazers_count":266,"open_issues_count":7,"forks_count":26,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-03-28T16:11:09.627Z","etag":null,"topics":["vue","vue-loader","vue-template-loader","webpack","webpack-loader"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ktsn.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-08-06T15:26:16.000Z","updated_at":"2025-03-23T07:40:20.000Z","dependencies_parsed_at":"2023-01-22T18:15:31.000Z","dependency_job_id":null,"html_url":"https://github.com/ktsn/vue-template-loader","commit_stats":null,"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ktsn%2Fvue-template-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ktsn%2Fvue-template-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ktsn%2Fvue-template-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ktsn%2Fvue-template-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ktsn","download_url":"https://codeload.github.com/ktsn/vue-template-loader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247217222,"owners_count":20903009,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["vue","vue-loader","vue-template-loader","webpack","webpack-loader"],"created_at":"2024-08-02T09:01:05.675Z","updated_at":"2025-04-04T17:10:18.592Z","avatar_url":"https://github.com/ktsn.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# vue-template-loader\n\n[![Build Status](https://travis-ci.org/ktsn/vue-template-loader.svg?branch=master)](https://travis-ci.org/ktsn/vue-template-loader)\n[![vue-template-loader Dev Token](https://badge.devtoken.rocks/vue-template-loader)](https://devtoken.rocks/package/vue-template-loader)\n\nVue.js 2.0 template loader for webpack\n\nThis loader pre-compiles a html template into a render function using the [vue-template-compiler](https://www.npmjs.com/package/vue-template-compiler). Each html file is transformed into a function that takes a vue component options object and injects a render function, styles and HMR support.\n\nIn most cases, [vue-loader](https://github.com/vuejs/vue-loader) is recommended over this loader.\n\n## Features\n\n- Transforms a html template into a render function\n- Supports scoped css and css modules (similar to vue-loader)\n- HMR support for templates\n- Decorator syntax support (can be used with [vue-class-component](https://github.com/vuejs/vue-class-component) or other class style components)\n\n## Webpack Configuration\n\n### Loading a Html Template\n\nAdd vue-template-loader as a loader to your webpack configuration.\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      { test: /\\.html$/, use: 'vue-template-loader' }\n    ]\n  }\n}\n```\n\n### Asset Transforms\n\nTo transform asset paths in your templates to `require` expressions that webpack can handle, configure the `transformAssetUrls` option. For example, if you would like webpack to process the image files in the `src` attribute of `\u003cimg\u003e` elements:\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.html$/,\n        loader: 'vue-template-loader',\n        options: {\n          transformAssetUrls: {\n            // The key should be an element name\n            // The value should be an attribute name or an array of attribute names\n            img: 'src'\n          }\n        }\n      },\n\n      // Make sure to add a loader that can process the asset files\n      {\n        test: /\\.(png|jpg)/,\n        loader: 'file-loader',\n        options: {\n          // ...\n        }\n      }\n    ]\n  }\n}\n```\n\n### Functional Component\n\nIf you want to use functional component template, you need to set `functional: true` option to loader options. You may want to use `oneOf` to handle both normal and functional template configs.\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.html$/,\n        oneOf: [\n          // If the file name has `.functional` suffix, treat it as functional component template\n          // You can change this rule whatever you want.\n          {\n            test: /\\.functional\\.html$/,\n            loader: 'vue-template-loader',\n            options: {\n              functional: true\n            }\n          },\n\n          // Normal component template\n          {\n            loader : 'vue-template-loader'\n          }\n        ]\n      }\n    ]\n  }\n}\n```\n\n### Loading Scoped Styles\n\nFor an explanation of scoped styles, see the [vue-loader docs](https://vue-loader.vuejs.org/en/features/scoped-css.html).\n\nHtml and style files need to be imported using `import withRender from './app.html?style=./app.css'`.\n\nYou also need modify your webpack config as follows:\n- Set `scoped: true` in the vue-template-loader options\n- Mark some of your style loaders (usually `style-loader` and `css-loader`) as post-loaders (by setting `enforce: 'post'`).\n\n**Logic for what to mark as a post-loader:** vue-template-loader injects an _inline_ webpack loader into your loader pipeline to modify your style files to include [scope-id] selectors. Webpack loaders run in the order normal -\u003e inline -\u003e post, so any loaders you want to run before the inline loader should be normal loaders, and anything you want to run after the inline loader should be post loaders (i.e. marked with `enforce: 'post'`).\n\nTypically you will want to leave loaders that compile to css (like less, sass and postcss transpilers) as normal loaders, so they run before the [scope-id] injection. Loaders that transform css into a format for webpack consumption (like `style-loader` and `css-loader`) should be post loaders (marked as `enforce: 'post'`).\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        // Loaders that transform css into a format for webpack consumption should be post loaders (enforce: 'post')\n        enforce: 'post',\n        test: /\\.css$/,\n        use: ['style-loader', 'css-loader']\n      },\n      // We needed to split the rule for .scss files across two rules\n      {\n        // The loaders that compile to css (postcss and sass in this case) should be left as normal loaders\n        test: /\\.scss$/,\n        use: ['postcss-loader', 'sass-loader']\n      },\n      {\n        // The loaders that format css for webpack consumption should be post loaders\n        enforce: 'post',\n        test: /\\.scss$/,\n        use: ['style-loader', 'css-loader']\n      }\n    ]\n  }\n}\n```\n\n#### `\u003e\u003e\u003e` combinator\n\nThere are cases where you may want to style children components e.g. using a third party component. In such cases, you can use the `\u003e\u003e\u003e` (/deep/) combinator to apply styles to any descendant elements of a scoped styled element.\n\nInput:\n\n```css\n.foo \u003e\u003e\u003e .bar {\n  color: red;\n}\n```\n\nOutput:\n\n```css\n.foo[data-v-4fd8d954] .bar {\n  color: red\n}\n```\n\nIf you are using less, note that it does not yet support the `\u003e\u003e\u003e` operator, but you can use:\n```less\n@deep: ~\"\u003e\u003e\u003e\";\n\n.foo @{deep} .bar {\n  color: red;\n}\n```\n\n### Loading CSS Modules\n\nFor an explanation of CSS modules, see the [vue-loader docs](https://vue-loader.vuejs.org/en/features/css-modules.html).\n\nHtml and style files need to be imported using the loader syntax: `import withRender from './app.html?style=./app.css'`. You also need to enable the `modules` flag of `css-loader`.\n\nvue-template-loader will add the `$style` property to your view model and you can use hashed classes through it.\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.html$/,\n        use: 'vue-template-loader'\n      },\n      {\n        test: /\\.css$/,\n        use: ['style-loader', 'css-loader?modules'] // Enable CSS Modules\n      }\n    ]\n  }\n}\n```\n\n### Disabling HMR\n\nBy default Hot Module Replacement is disabled in the following situations:\n\n * Webpack `target` is `node`\n * Webpack minifies the code\n * `process.env.NODE_ENV === 'production'`\n\nYou may use the `hmr: false` option to disable HMR explicitly for any other situation.\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.html$/,\n        loader: 'vue-template-loader',\n        options: {\n          hmr: false // disables Hot Modules Replacement\n        }\n      }\n    ]\n  }\n}\n```\n\n## Example\n\nWrite a template for a Vue component using html.\n\n```html\n\u003c!-- app.html --\u003e\n\u003cdiv class=\"app\"\u003e\n  \u003cp\u003e{{ text }}\u003c/p\u003e\n  \u003cbutton type=\"button\" @click=\"log\"\u003eLog\u003c/button\u003e\n\u003c/div\u003e\n```\n\nImport it as a function and pass a component option to the function. If you would like to load a style file, add the `style` query and specify the style file path.\n\n```js\n// app.js\nimport withRender from './app.html?style=./app.css'\n\nexport default withRender({\n  data () {\n    return {\n      text: 'Example text'\n    }\n  },\n\n  methods: {\n    log () {\n      console.log('output log')\n    }\n  }\n})\n```\n\nYou can use decorator syntax for any class style components.\n\n```js\nimport Vue from 'vue'\nimport Component from 'vue-class-component'\nimport WithRender from './app.html'\n\n@WithRender\n@Component\nexport default class App extends Vue {\n  text = 'Example text'\n\n  log () {\n    console.log('output log')\n  }\n}\n```\n\n### Typescript\n\nIf you use this loader with TypeScript, make sure to add a declaration file for html files into your project. (If you want to load style files via query string, you need to replace `*.html` with `*.css`)\n\n```ts\ndeclare module '*.html' {\n  import Vue, { ComponentOptions, FunctionalComponentOptions } from 'vue'\n  interface WithRender {\n    \u003cV extends Vue, U extends ComponentOptions\u003cV\u003e | FunctionalComponentOptions\u003e(options: U): U\n    \u003cV extends typeof Vue\u003e(component: V): V\n  }\n  const withRender: WithRender\n  export default withRender\n}\n```\n\n## Option Reference\n\n### transformAssetUrls\n\n- type: `Object`\n- default: `{}`\n\nTo specify which attribute of elements are processed with webpack. Keys are element names while the values are their attribute string or array of string.\n\n### functional\n\n- type: `Boolean`\n- default: `false`\n\nProcess template as functional component template if it is `true`.\n\n### scoped\n\n- type: `Boolean`\n- default: `false`\n\nIf `true`, styles will be scoped.\n\n### hmr\n\n- type: `Boolean`\n- default: `true`\n\nIf `false`, disable hot module replacement.\n\n### optimizeSSR\n\n- type: `Boolean`\n- default: `false`\n\nYou can enable SSR optimazation when specify this option `true`.\n\n### compiler\n\n- type: `function`\n- default: `vue-template-compiler`\n\nYou can override the default compiler using this option.\n\n## Templates\n\nThere is vue-cli template using vue-template-loader (Thanks to @Toilal).\n\n- [Toilal/vue-webpack-template](https://github.com/Toilal/vue-webpack-template)\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fktsn%2Fvue-template-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fktsn%2Fvue-template-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fktsn%2Fvue-template-loader/lists"}