systemjs-plugin-vue
SystemJS plugin for Vue single file components
Usage
This plugin is only tested with jspm 0.17+ and Vue.js 2.0+.
jspm install npm:vue@2.0.0-alpha.5jspm install --dev npm:systemjs-plugin-vue
System
You can use this vue-cli template to scaffold an example project.
Features
-
ES2015 by default (requires
systemsjs-plugin-babel
) -
lang="xxx"
pre-processors -
Scoped CSS
-
PostCSS support
-
CSS are automatically extracted across all components and injected as a single
<style>
tag
Pre-Processors
To enable a pre-processor, you need to install the corresponding pre-processor module via npm, not jspm. Note that if you are using any non-babel pre-processors, then in-browser JIT compilation will not work due to Node dependencies. Use jspm bundle -wid
during development, it's faster anyway.
Example:
npm install less --save-dev
These are the preprocessors supported out of the box:
- stylus
- less
- scss (via
node-sass
, usesass
in config section) - jade
- pug
- coffee-script (use
coffee
in config section)
Configuring Options
You can add a Vue section in your SystemJS config:
System
Or, alternatively, create a vue.config.js
file at the root of your project, and export the configuration object.
Passing Options to Pre-Processors
Just add a nested object under vue
:
System
Custom Lang Compiler
You can provide custom lang
compilers under the compilers
option. It is recommended to use vue.config.js
for custom compilers, and in most cases you will want to import your Node dependencies as raw Node modules:
// vue.config.jscompilers:'my-lang' raw filenamereturn System
PostCSS Configuration
Use vue.postcss
in your SystemJS config file. The option can be:
-
An array of plugins. Each plugin can either be a string module name or an array with the first element being the module name and the second element being an options object to be passed to that plugin.
Example:
System -
An object containing
options
(passed topostcss.process()
) andplugins
. The parser and stringifier options can also be string module names and will be resolved automatically.Example:
System
If using vue.config.js
, you can also directly provide the imported plugins instead of string module names.
Caveats
- SystemJS' hot reload mechanism is quite limiting and it's currently not possible to support the same level of hot-reload available in
vue-loader
andvueify
.