Example for `rollup-plugin-vue`

Vue component module

Create a module for vue component.

Hello.vue

<template>
  <div class="hello">
    <h1 class="hello__title">{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Hello World!'
    }
  }
}
</script>

<style lang="stylus">
.hello {
  &__title {
    color: #42b983;
  }
}
</style>

index.js

import Hello from './Hello.vue'

export default Hello

package.json

{
  "name": "test-rollup-plugin-vue",
  "version": "1.0.0",
  "devDependencies": {
    "rollup-plugin-buble": "^0.14.0",
    "rollup-plugin-commonjs": "^5.0.4",
    "rollup-plugin-node-resolve": "^2.0.0",
    "rollup-plugin-vue": "^2.2.3"
  }
}

rollup.config.js

import vue from 'rollup-plugin-vue';
import babel from 'rollup-plugin-buble';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';

export default {
    moduleName: 'hello',
    entry: 'index.js',
    dest: 'dist/bundle.js',
    format: 'iife',
    plugins: [
        resolve({
            jsnext: true,
            main: true,
            browser: true,
        }),
        commonjs(),
        vue({compileTemplate: true}),
        babel(),
    ],
};

Dumping terminal history

➜  test-rollup-plugin-vue system_profiler SPSoftwareDataType
Software:

    System Software Overview:

      System Version: macOS 10.12 (16A323)
      Kernel Version: Darwin 16.0.0
      Boot Volume: Zero
      Boot Mode: Normal
      Computer Name: Rahul’s MacBook Pro
      User Name: Rahul Kadyan (znck)
      Secure Virtual Memory: Enabled
      System Integrity Protection: Enabled
      Time since boot: 3 days 20:45

➜  test-rollup-plugin-vue npm install
............. // Output removed.

➜  test-rollup-plugin-vue npm ls --depth=0
test-rollup-plugin-vue@1.0.0 ~/wrecked/test-rollup-plugin-vue
├── rollup-plugin-buble@0.14.0
├── rollup-plugin-commonjs@5.0.4
├── rollup-plugin-node-resolve@2.0.0
└── rollup-plugin-vue@2.2.3

➜  test-rollup-plugin-vue npm -v
3.10.3

➜  test-rollup-plugin-vue node -v
v6.3.1

➜  test-rollup-plugin-vue rollup -v
rollup version 0.35.7

➜  test-rollup-plugin-vue rollup -c
dist/bundle.css 49 B