vue-loader
webpack loader for Vue Single-File Components
NOTE: The master branch now hosts the code for v15! Legacy code is now in the v14 branch.
What is Vue Loader?
vue-loader
is a loader for webpack that allows you to author Vue components in a format called Single-File Components (SFCs):
<template><div class="example">{{ msg }}</div></template><script>export default {data () {return {msg: 'Hello world!'}}}</script><style>.example {color: red;}</style>
There are many cool features provided by vue-loader
:
- Allows using other webpack loaders for each part of a Vue component, for example Sass for
<style>
and Pug for<template>
; - Allows custom blocks in a
.vue
file that can have custom loader chains applied to them; - Treat static assets referenced in
<style>
and<template>
as module dependencies and handle them with webpack loaders; - Simulate scoped CSS for each component;
- State-preserving hot-reloading during development.
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.