vuejs/ vue-loader
Need help with vue-loader?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.
About the developer
4.6K Stars 
843 Forks 
MIT License 
369 Commits 
139 Opened issues 
Description
📦 Webpack loader for Vue.js components
Services available
Contributors list
Readme
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-loaderis a loader for webpack that allows you to author Vue components in a format called Single-File Components (SFCs):
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 and Pug for ;
- Allows custom blocks in a
.vue
file that can have custom loader chains applied to them; - Treat static assets referenced in and 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-loadergives you a modern, flexible and extremely powerful front-end workflow for authoring Vue.js applications.
How It Works
The following section is for maintainers and contributors who are interested in the internal implementation details of
vue-loader, and is not required knowledge for end users.
vue-loaderis not a simple source transform loader. It handles each language blocks inside an SFC with its own dedicated loader chain (you can think of each block as a "virtual module"), and finally assembles the blocks together into the final module. Here's a brief overview of how the whole thing works:
-
vue-loader
parses the SFC source code into an SFC Descriptor using@vue/component-compiler-utils
. It then generates an import for each language block so the actual returned module code looks like this:// code returned from the main loader for 'source.vue'
// import the