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

jspm install npm:[email protected]
jspm install --dev npm:systemjs-plugin-vue

System.config({
  "meta": {
    "*.vue": {
      "loader": "systemjs-plugin-vue"
    }
  }
})

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

<style lang="less">
  /* use less! */
</style>

These are the preprocessors supported out of the box:

stylus
less
scss (via node-sass, use sass 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.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:

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:

// 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:
```
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:
```
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.

Unable to build app with `jspm build`

I created https://github.com/vuejs-templates/systemjs/issues/2 earlier because I was not able to build my app.
I've been investigating some, and I might be mistaken but this is what I have found:

System.get and System.set are used because vueCompiler.parseComponent return a script-property with plain JavaScript, which must have a render property with content of vueComponent.compile. And so the template is created as a module and some string manipulation is done to have script require the compiled template.
This doesn't work when running the built version because System isn't available.

I've been playing around with the compiler trying to make a very simple example work, this is my hack so far:

exports.translate = (load, opts) => {
  let sfc = vueCompiler.parseComponent(load.source)
  let compiled = vueCompiler.compile(sfc.template.content, {pad: true})
  let template = compiled.render
  return sfc.script.content.replace(/default {/, `default { render: function(){${template}},`)
}

Here the template is injected directly with the string manipulation. This won't work because with can't be used in strict mode.
So I have tried removing with keyword by string replace, but this won't work because then _h2 (and the other) variable(s) can't be found.

Update

Tried altering the files of systemjs-plugin-vue and vue-template-compiler directly, then copying them into a project for a simple test. Removed with from index.js of vue-template-compiler, then added this. to where ever looked appropriate and it seems to run fine.
Style and language support is dropped, but theory is fine. Here is an example:
https://gist.github.com/eirikb/1abf8335d4b7c5894b50db7718278fff

vuejs / systemjs-plugin-vue Goto Github PK