Skip to content
πŸ“¦ Webpack loader for Vue.js components
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci ci: add config Mar 19, 2018
.github chore: add issue template Apr 24, 2018
docs docs: add quotes (#1509) Mar 6, 2019
example
lib feat: support post loaders for template blocks (#1500) Feb 28, 2019
test test: add regression test for #1491 (#1510) Mar 11, 2019
.babelrc init Mar 18, 2018
.eslintrc.js
.gitignore fix: avoid generating custom block when there is only cache-loader (#… Feb 18, 2019
.npmignore chore: ignore files for npm Jun 1, 2018
CHANGELOG.md chore: changelog [ci skip] Feb 28, 2019
LICENSE initial work Mar 19, 2018
README.md docs: fix broken link (#1297) May 14, 2018
appveyor.yml ci: tweak appveyor config Mar 22, 2018
package.json 15.7.0 Feb 28, 2019
tsconfig.json fix: duplicate loaders when using src import with loader options May 2, 2018
yarn.lock fix: avoid generating custom block when there is only cache-loader (#… Feb 18, 2019

README.md

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):

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

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.