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) [![Windows Build status](https://ci.appveyor.com/api/projects/status/8cdonrkbg6m4k1tm/branch/master?svg=true)](https://ci.appveyor.com/project/yyx990803/vue-loader/branch/master)
|
2 |
|
3 | > webpack loader for Vue Single-File Components
|
4 |
|
5 | **NOTE:** The master branch now hosts the code for v15! Legacy code is now in the [v14 branch](https://github.com/vuejs/vue-loader/tree/v14).
|
6 |
|
7 | - [Documentation](https://vue-loader.vuejs.org)
|
8 | - [Migrating from v14](https://vue-loader.vuejs.org/migrating.html)
|
9 |
|
10 | ## What is Vue Loader?
|
11 |
|
12 | `vue-loader` is a loader for [webpack](https://webpack.js.org/) that allows you to author Vue components in a format called [Single-File Components (SFCs)](./docs/spec.md):
|
13 |
|
14 | ``` vue
|
15 | <template>
|
16 | <div class="example">{{ msg }}</div>
|
17 | </template>
|
18 |
|
19 | <script>
|
20 | export default {
|
21 | data () {
|
22 | return {
|
23 | msg: 'Hello world!'
|
24 | }
|
25 | }
|
26 | }
|
27 | </script>
|
28 |
|
29 | <style>
|
30 | .example {
|
31 | color: red;
|
32 | }
|
33 | </style>
|
34 | ```
|
35 |
|
36 | There are many cool features provided by `vue-loader`:
|
37 |
|
38 | - Allows using other webpack loaders for each part of a Vue component, for example Sass for `<style>` and Pug for `<template>`;
|
39 | - Allows custom blocks in a `.vue` file that can have custom loader chains applied to them;
|
40 | - Treat static assets referenced in `<style>` and `<template>` as module dependencies and handle them with webpack loaders;
|
41 | - Simulate scoped CSS for each component;
|
42 | - State-preserving hot-reloading during development.
|
43 |
|
44 | In a nutshell, the combination of webpack and `vue-loader` gives you a modern, flexible and extremely powerful front-end workflow for authoring Vue.js applications.
|