├── .babelrc ├── .eslintrc ├── .gitignore ├── LICENSE ├── README.md ├── circle.yml ├── docs ├── LANGS.md ├── assets │ ├── CNAME │ └── circle.yml ├── book.json ├── deploy.sh └── en │ ├── README.md │ ├── SUMMARY.md │ ├── configurations │ ├── advanced.md │ ├── asset-url.md │ ├── extract-css.md │ └── pre-processors.md │ ├── features │ ├── css-modules.md │ ├── es2015.md │ ├── hot-reload.md │ ├── postcss.md │ └── scoped-css.md │ ├── options.md │ ├── start │ ├── setup.md │ └── spec.md │ └── workflow │ ├── linting.md │ ├── production.md │ ├── testing-with-mocks.md │ └── testing.md ├── index.js ├── lib ├── gen-id.js ├── loader.js ├── normalize.js ├── parser.js ├── script-loader.js ├── selector.js ├── style-loader.js ├── style-rewriter.js ├── template-compiler.js └── template-loader.js ├── package-lock.json ├── package.json └── test ├── fixtures ├── basic.vue ├── css-modules.vue ├── es2015.vue ├── extend.vue ├── extract-css.vue ├── inject.js ├── inject.vue ├── logo.png ├── media-query.vue ├── postcss.vue ├── pre.vue ├── resolve.vue ├── scoped-css.vue ├── script-import.js ├── script-import.vue ├── service.js ├── style-import-scoped.css ├── style-import.css ├── style-import.vue ├── template-import.pug └── template-import.vue └── test.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015"] 3 | } 4 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "root": true, 3 | "extends": "vue" 4 | } 5 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | npm-debug.log 3 | test/output 4 | docs/_book 5 | .DS_Store 6 | .idea 7 | *.iml 8 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Q42 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-loader [![Build Status](https://circleci.com/gh/vuejs/vue-loader/tree/master.svg?style=shield)](https://circleci.com/gh/vuejs/vue-loader/tree/master) [![npm package](https://img.shields.io/npm/v/vue-loader.svg?maxAge=2592000)](https://www.npmjs.com/package/vue-loader) 2 | 3 | > Vue.js component loader for [Webpack](http://webpack.github.io). 4 | 5 | **NOTE: the master branch now hosts 9.x which only works with Vue 2.0. For version 8.x which works with Vue 1.x, see the [8.x branch](https://github.com/vuejs/vue-loader/tree/8.x).** 6 | 7 | It allows you to write your components in this format: 8 | 9 | ![screenshot](http://blog.evanyou.me/images/vue-component.png) 10 | 11 | The best way to get started is with [vue-cli](https://github.com/vuejs/vue-cli): 12 | 13 | ``` js 14 | npm install -g vue-cli 15 | vue init webpack-simple hello 16 | cd hello 17 | npm install 18 | npm run dev 19 | ``` 20 | 21 | This will setup a basic Webpack + `vue-loader` project for you, with `*.vue` files and hot-reloading working out of the box! 22 | 23 | For advanced `vue-loader` configuration, checkout the [documentation](http://vuejs.github.io/vue-loader/). 24 | -------------------------------------------------------------------------------- /circle.yml: -------------------------------------------------------------------------------- 1 | machine: 2 | node: 3 | version: 6 4 | -------------------------------------------------------------------------------- /docs/LANGS.md: -------------------------------------------------------------------------------- 1 | * [English](en/) 2 | -------------------------------------------------------------------------------- /docs/assets/CNAME: -------------------------------------------------------------------------------- 1 | vue-loader.vuejs.org 2 | -------------------------------------------------------------------------------- /docs/assets/circle.yml: -------------------------------------------------------------------------------- 1 | general: 2 | branches: 3 | ignore: 4 | - gh-pages 5 | -------------------------------------------------------------------------------- /docs/book.json: -------------------------------------------------------------------------------- 1 | { 2 | "gitbook": ">3.0.0", 3 | "plugins": ["edit-link", "theme-vuejs@git+https://github.com/pearofducks/gitbook-plugin-theme-vuejs.git", "-fontsettings", "github"], 4 | "pluginsConfig": { 5 | "edit-link": { 6 | "base": "https://github.com/vuejs/vue-loader/tree/master/docs", 7 | "label": "Edit This Page" 8 | }, 9 | "github": { 10 | "url": "https://github.com/vuejs/vue-loader/" 11 | } 12 | }, 13 | "links": { 14 | "sharing": { 15 | "facebook": false, 16 | "twitter": false 17 | } 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /docs/deploy.sh: -------------------------------------------------------------------------------- 1 | cd docs 2 | rm -rf _book 3 | gitbook build 4 | cp assets/circle.yml _book/circle.yml 5 | cp assets/CNAME _book/CNAME 6 | cd _book 7 | git init 8 | git add -A 9 | git commit -m 'update book' 10 | git push -f git@github.com:vuejs/vue-loader.git master:gh-pages 11 | -------------------------------------------------------------------------------- /docs/en/README.md: -------------------------------------------------------------------------------- 1 | # Introduction 2 | 3 | ### What is `vue-loader`? 4 | 5 | `vue-loader` is a loader for Webpack that can transform Vue components written in the following format into a plain JavaScript module: 6 | 7 | ![screenshot](http://blog.evanyou.me/images/vue-component.png) 8 | 9 | There are many cool features provided by `vue-loader`: 10 | 11 | - ES2015 enabled by default; 12 | - Allows using other Webpack loaders for each part of a Vue component, for example SASS for ` 17 | ``` 18 | 19 | Under the hood, the text content inside the ` 60 | ``` 61 | 62 | However, note this makes your Vue component Webpack-specific and not compatible with Browserify and [vueify](https://github.com/vuejs/vueify). **If you intend to ship your Vue component as a reusable 3rd-party component, avoid using this syntax.** 63 | -------------------------------------------------------------------------------- /docs/en/features/css-modules.md: -------------------------------------------------------------------------------- 1 | # CSS Modules 2 | 3 | > requires ^9.8.0 4 | 5 | [CSS Modules](https://github.com/css-modules/css-modules) is a popular system for modularizing and composing CSS. `vue-loader` provides first-class integration with CSS Modules as an alternative for simulated scoped CSS. 6 | 7 | ### Usage 8 | 9 | Just add the `module` attribute to your ` 20 | ``` 21 | 22 | This will turn on CSS Modules mode for `css-loader`, and the resulting class identifier object will be injected into the component as a computed property with the name `$style`. You can use it in your templates with a dynamic class binding: 23 | 24 | ``` html 25 | 30 | ``` 31 | 32 | Since it's a computed property, it also works with the object/array syntax of `:class`: 33 | 34 | ``` html 35 | 45 | ``` 46 | 47 | And you can also access it from JavaScript: 48 | 49 | ``` html 50 | 59 | ``` 60 | 61 | Refer to the [CSS Modules spec](https://github.com/css-modules/css-modules) for mode details such as [global exceptions](https://github.com/css-modules/css-modules#exceptions) and [composition](https://github.com/css-modules/css-modules#composition). 62 | 63 | ### Custom Inject Name 64 | 65 | You can have more than one ` 71 | 72 | 75 | ``` 76 | 77 | ### Configuring `css-loader` Query 78 | 79 | CSS Modules are processed via [css-loader](ttps://github.com/webpack/css-loader). With ` 11 | 12 | 15 | ``` 16 | 17 | Into the following: 18 | 19 | ``` html 20 | 25 | 26 | 29 | ``` 30 | 31 | #### Notes 32 | 33 | 1. You can include both scoped and non-scoped styles in the same component: 34 | 35 | ``` html 36 | 39 | 40 | 43 | ``` 44 | 45 | 2. A child component's root node will be affected by both the parent's scoped CSS and the child's scoped CSS. 46 | 47 | 3. Partials are not affected by scoped styles. 48 | 49 | 4. **Scoped styles do not eliminate the need for classes**. Due to the way browsers render various CSS selectors, `p { color: red }` will be many times slower when scoped (i.e. when combined with an attribute selector). If you use classes or ids instead, such as in `.example { color: red }`, then you virtually eliminate that performance hit. [Here's a playground](http://stevesouders.com/efws/css-selectors/csscreate.php) where you can test the differences yourself. 50 | 51 | 5. **Be careful with descendant selectors in recursive components!** For a CSS rule with the selector `.a .b`, if the element that matches `.a` contains a recursive child component, then all `.b` in that child component will be matched by the rule. 52 | -------------------------------------------------------------------------------- /docs/en/options.md: -------------------------------------------------------------------------------- 1 | # Options Reference 2 | 3 | ## Usage Difference Between Webpack 1 & 2 4 | 5 | For Webpack 1.x: add a root `vue` block in your Webpack config: 6 | 7 | ``` js 8 | module.exports = { 9 | // ... 10 | vue: { 11 | // vue-loader options 12 | } 13 | } 14 | ``` 15 | 16 | For Webpack 2 (^2.1.0-beta.25): 17 | 18 | ``` js 19 | module.exports = { 20 | // ... 21 | module: { 22 | rules: [ 23 | { 24 | test: /\.vue$/, 25 | loader: 'vue', 26 | options: { 27 | // vue-loader options 28 | } 29 | } 30 | ] 31 | } 32 | } 33 | ``` 34 | 35 | ### loaders 36 | 37 | - type: `Object` 38 | 39 | An object specifying Webpack loaders to use for language blocks inside `*.vue` files. The key corresponds to the `lang` attribute for language blocks, if specified. The default `lang` for each type is: 40 | 41 | - `