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.