How to use Vue Plugins Correctly? <PluginName> is not defined

Question

Im learning to make Vue Plugin, based on https://v2.vuejs.org/v2/guide/plugins.html, this is my simple code:

plugin1.js:

AlertPlugin.install = function (Vue, options) {
    Vue.prototype.$classicalert = function (message) {
        alert(message)
    };
};

app.js:

window.Vue = require('vue');
import AlertPlugin from './plugin1.js'
Vue.use(AlertPlugin);

const app = new Vue({
    el: '#app',
    render: h => h(Main)
});

when im trying to run it, the web page become blank, and error AlertPlugin is not defined.

please help?

Answer 1

In your plugin1.js file, you are attempting to set the install property of the AlertPlugin object, which (as the error says) is not defined.

Your plugin1.js file should look like this:

export default {
  install: function (Vue, options) {
    Vue.prototype.$classicalert = function (message) {
      alert(message)
    };
  }
}

This defines a default object to export containing a property install. When you import this object as AlertPlugin, like you are doing in app.js, it will result in an AlertPlugin object with the install property you defined in the plugin's file.