Does not work with Vue.js

[victorwpbastos]

main.js:

import Vue from 'vue';

new Vue({
    el: 'body'
})

rollup.config.js:

// rollup.config.js
import nodeResolve from 'rollup-plugin-node-resolve';
import nodeGlobals from 'rollup-plugin-node-globals';
import nodeBuiltins from 'rollup-plugin-node-builtins';
import commonjs from 'rollup-plugin-commonjs';

export default {
    entry: 'src/main.js',

    dest: 'dist/bundle-rollup.js',

    plugins: [
        nodeGlobals(),
        nodeBuiltins(),
        nodeResolve({
            jsnext: true,  // Default: false
            main: true,
            browser: true  // Default: false
        }),
        commonjs({
            include: 'node_modules/**'
        })
    ]
}

error:

[TrySound]

Ref calvinmetcalf/rollup-plugin-node-globals#2

[victorwpbastos]

That instructions does not work either.

[TrySound]

@victorwpbastos Why do you need rollup-plugin-node-globals and rollup-plugin-node-builtins? Everything works without them.

[victorwpbastos]

With vue does not work.

[victorwpbastos]

I did try a lot, without success.

[TrySound]

What exactly doesn't work without those plugins?

[victorwpbastos]

Vue uses process and global node vars. When you try to bundle with rollup, both process and global are undefined.

[TrySound]

Okay. process.env.NODE_ENV should be handled in another way with https://github.com/rollup/rollup-plugin-replace

plugins: [
  replace({
    'process.env.NODE_ENV': JSON.stringify('production') // or 'development'
  })
]

This will let rollup remove constantly false conditions for prodution.

global does not affect your runtime.

[nicolasparada]

To use set from Vue I have to add it to namedExports so I can use it like so:

import { set } from 'vue'
set(object, key, value)

So far, so good. But then I end with a problem at runtime from Vuex:

Uncaught TypeError: Vue.set is not a function

Yeah, I could just remove it from the namedExports and do:

import Vue from 'vue'
Vue.set(object, key, value)

And all works fine, but I want to know why.
When a I use the namedExports option am I unable to import the whole library?
@Rich-Harris some help, please.

[jonataswalker]

This works for me:

import json from 'rollup-plugin-json';
import vue from 'rollup-plugin-vue';
import buble from 'rollup-plugin-buble';
import resolve from 'rollup-plugin-node-resolve';
import includePaths from 'rollup-plugin-includepaths';

let includePathOptions = {
  include: {
    'vue': 'node_modules/vue/dist/vue.common.js',
    'vue-router': 'node_modules/vue-router/dist/vue-router.js'
  },
  external: ['vue', 'vue-router']
};

export default {
  format: 'iife',
  entry: 'src/index.js',
  dest: 'app/app.js',
  globals: {
    'vue': 'Vue',
    'vue-router': 'VueRouter'
  },
  plugins: [
    json(),
    vue(),
    includePaths(includePathOptions),
    resolve({
      browser: true,
      main: true
    }),
    buble()
  ]
}