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.7K Stars 886 Forks MIT License 383 Commits 178 Opened issues


📦 Webpack loader for Vue.js components

Services available


Need anything else?

Contributors list

vue-loader Build Status Windows Build status

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?

is 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

  • Allows using other webpack loaders for each part of a Vue component, for example Sass for
     and Pug for 
  • Allows custom blocks in a
    file that can have custom loader chains applied to them;
  • Treat static assets referenced in
     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

gives 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

, and is not required knowledge for end users.

is 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:
  1. vue-loader
    parses the SFC source code into an SFC Descriptor using
    . 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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.