webpack loader for .vue files
ES2015 enabled
Allows separate loader for each component
Allows custom section in .vue to pply custom loader chains
Treat static contents as dependencies
Can simulate scoped CSS for each component
Support hot reloading
<template>, <script>, and <style>
src="...." import the content of an external file for the block
path follow same path resolution rules to require()
can also import resource directly from NPM packages src="package-name/path/file..."
Can specify non-default language
<style lang="sass">
<template> - HTML
<script>
ES2015 supported if babel-loader / bubble-loader detected
just like a normal .js via webpack
can require()
can import / export if ES2015 supported
must export a
Vue.js component options object, or
Vue.extend() extended constructor
<style>
default css
multiple <style> supported
can mix scoped and non-scoped
"scoped"
<style scoped> - will apply to current component only
uses PostCSS to transform, see https://vue-loader.vuejs.org/en/features/scoped-css.html
deep selector:
.a >>> .b { /* ... */ } transforms to .a[data-v-f3f3eg9] .b { /* ... */ }
.a /deep/ .b
CSS Modules (see more in document)
<style module>
turn CSS module into a cssloader
<p :class="$style.red">
By default styles injected into <head>, can also configure webpack to extract all style into a single css file
custom block
define a custom loader in "loaders" section in vue-loader option, then be processed
otherwise, ignored
When scaffolding the project with vue-cli, Hot Reload is enabled out-of-the-box.
Hot Reload is always enabled except following situations:
webpack target is node (SSR)
webpack minifies the code
process.env.NODE_ENV === 'production'