Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vuejs/systemjs-plugin-vue
SystemJS plugin for Vue single file components
https://github.com/vuejs/systemjs-plugin-vue
Last synced: 2 days ago
JSON representation
SystemJS plugin for Vue single file components
- Host: GitHub
- URL: https://github.com/vuejs/systemjs-plugin-vue
- Owner: vuejs
- Archived: true
- Created: 2016-06-21T04:29:12.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2016-11-25T11:06:58.000Z (over 7 years ago)
- Last Synced: 2024-04-13T21:44:24.390Z (3 months ago)
- Language: JavaScript
- Size: 14.6 KB
- Stars: 34
- Watchers: 10
- Forks: 11
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
Lists
- awesome-vue-js - Systemjs Plugin-vue
README
# systemjs-plugin-vue
> SystemJS plugin for Vue single file components
## !!! Maintenance Status !!!
This project is currently on hold, and it may not work properly with the latest Vue 2.0 versions. This is because the interest in using SystemJS with Vue doesn't seem to justify the effort required to maintain this plugin. If you are interested in taking over the maintenance of this project, please open an issue!
## Usage
This plugin is only tested with jspm 0.17+ and Vue.js 2.0+.
``` bash
jspm install npm:[email protected]
jspm install --dev npm:systemjs-plugin-vue
```
``` js
System.config({
"meta": {
"*.vue": {
"loader": "systemjs-plugin-vue"
}
}
})
```
You can use [this vue-cli template](https://github.com/vuejs-templates/systemjs) 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 `` 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:
``` bash
npm install less --save-dev
```
``` html
<style lang="less">
/* use less! */
```
These are the preprocessors supported out of the box:
- stylus
- less
- scss (via `node-sass`, use `sass` in [config section](#configuring-options))
- jade
- pug
- coffee-script (use `coffee` in [config section](#configuring-options))
## Configuring Options
You can add a Vue section in your SystemJS config:
``` js
System.config({
vue: {
// options
}
})
```
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`:
``` js
System.config({
vue: {
less: {
paths: [...] // custom less @import paths
}
}
})
```
### 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:
``` js
// vue.config.js
export default {
compilers: {
'my-lang' (raw, filename) {
return System.import('@node/my-lang').then(myLang => {
return myLang.compile(raw) // assumes returning a promise
})
}
}
}
```
### 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:
``` js
System.config({
vue: {
postcss: [
'postcss-nested',
['autoprefixer', { browsers: 'last 2 versions' }]
]
}
})
```
- An object containing `options` (passed to `postcss.process()`) and `plugins`. The parser and stringifier options can also be string module names and will be resolved automatically.
Example:
``` js
System.config({
vue: {
postcss: {
options: {
parser: 'sugarss'
},
plugins: [...]
}
}
})
```
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` and `vueify`.