vue-loader

by vuejs

vuejs /vue-loader

📦 Webpack loader for Vue.js components

4.4K Stars 808 Forks Last release: 3 months ago (v15.9.3) MIT License 349 Commits 115 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

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?

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

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-loader
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

vue-loader
, and is not required knowledge for end users.

vue-loader
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
    @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

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.