JSPM

  • Created
  • Published
  • Downloads 59857
  • Score
    100M100P100Q147655F
  • License MIT

Roll .vue files

Package Exports

  • rollup-plugin-vue

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (rollup-plugin-vue) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Rollup Plugin for Vue

As vue-loader is for webpack and vueify is for browserify, similarly its for rollup. As we know, webpack and browserify concat stuff and make it runnable in browser. Its difficult to share .vue components. Now roll your Vue components.

With rollup you can break your application into reusable modules.

Working on next version. See changes

Development milestones

  • Scoped css for each component.
  • Allow using other rollup plugins for each part of Vue template, e.g. jade for <template>, scss for <style>, coffee for <script>.
  • Treat static assets in <template> and <style> as dependencies.

Rollup Plugin for Vue

Build Status Coverage Status Software License NPM Latest Version Issues

Installation

Node and Rollup are required.

npm install --save-dev rollup-plugin-vue

Usage

import {rollup} from 'rollup';
import vue from 'rollup-plugin-vue';

rollup({
    entry: 'index.js',
    plugins: [vue()]
});

Below is how you can use it from the command line with Bublé. Run rollup -c and it will find the config.

// rollup.config.js
import vue from 'rollup-plugin-vue'
import buble from 'rollup-plugin-buble' // rollup-plugin-babel also works

export default {
  entry: 'index.js',
  plugins: [
    vue(),
    buble()
  ]
}

Examples

Options

css

vue({
  // Filename to write all styles to
  css: 'bundle.scss',

  // Callback that will be called ongenerate with two arguments:
  // - styles: the contents of all style tags combined
  // - styleNodes: an array of style objects: [{lang: 'css', content: 'body { color: green }'}]
  css: function (styles, styleNodes) {
    writeFileSync(cssPath, styles)
  }

  // Disable any style output or callbacks
  css: false,

  // Default behaviour is to write all styles to the bundle destination where .js is replaced by .css
  css: null
})

compileTemplate

vue({
  // Compile templates to render functions (Vue 2 only)
  compileTemplate: true,
})

Change log

Please see CHANGELOG for more information what has changed recently.

Testing

$ npm run test

Contributing

Please see CONTRIBUTING and CONDUCT for details.

Security

If you discover any security related issues, please email hi@znck.me instead of using the issue tracker.

Credits

License

The MIT License (MIT). Please see License File for more information.