Vue is not defined after build

[mydnicq]

I have this file as an entry for my Vue project.

/* src/index.js */

import Player from './components/player.vue';

export function install(Vue) {
  Vue.component('vue-player', Player);
}
...

When I run

vue build src/index.js

and then run the output in the browser I can't access the Vue object, even though the warning from vue.runtime.common.js indicates that the Vue object is present.

Nowhere in my project I don't import the Vue module, because I'm writing a plugin. So it's somehow unclear how vue.runtime.common.js is present?

Morevoer, because vue.runtime.common.js is present I expect that Vue object is defined on window, but it isn't.

Please see the picture below for more info:

Can someone explain what is happening during the build process?

[zigomir]

@tadejstanic I think you'll still need to import vue first. I'm guessing you just don't want to include vue runtime at your plugin build, right? Try looking into build docs and try --prod --lib. I might be wrong though /cc @egoist

[egoist]

you can load your plugin in a regular entry instead, like example/index.js, and create Vue instance and install plugin src/index.js there. Then run example with vue build example/index.js --dist dist-example and build the plugin with vue build src/index.js --lib --prod

[egoist]

the vue build command only accept an app entry where you create Vue instance or a component.

Maybe we can check if the input file exports a install function and auto-install it in the default entry: /lib/default-entry.es6

[mydnicq]

Thank you @egoist for the direction. I went with the example folder and now I have a logical development env for Vue plugins.

I think it'd be great to have install function detection in default-entry.es6. However, as far as I understand vue buld webpack conf, this default entry is used only when the app entry is .vue file.

Maybe I'm wrong, but the install function is usually in the root index.js. For instance:

import MyPlugin from './components/plugin.vue';

export function install(Vue) {
  Vue.component('my-plugin', MyPlugin);
}

export {
  MyPlugin
};

/* -- Plugin definition & Auto-install -- */
/* You shouldn't have to modify the code below */

// Plugin
const plugin = {
  install
};

export default plugin;

// Auto-install
let GlobalVue = null;
if (typeof window !== 'undefined') {
  GlobalVue = window.Vue;
} else if (typeof global !== 'undefined') {
  GlobalVue = global.Vue;
}

if (GlobalVue) {
  GlobalVue.use(plugin);
}

[egoist]

hmm what's the problem here?

this default entry is used only when the app entry is .vue file.

If you're not using the default entry you can install plugin in your own entry file. --mount will also explicitly make your component use default entry. Maybe add --plugin to make input file use something like default-plugin-entry.es6 but I guess it's not necessary for now. 😅

I use vue build src/Counter.vue mainly for dev purpose, when it's getting more serious and I need more control of the entry file I would create a custom one to load the component.