Vue.use(plugin) causing error: Vue is a constructor and should be called with the `new` keywor

Question

Plugin involved - https://www.npmjs.com/package/sweetalert

Code in main.js

import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap-vue/dist/bootstrap-vue.css';
import BootstrapVue from 'bootstrap-vue';

import Vue from 'vue';
import Vuetify from 'vuetify';
import swal from 'sweetalert';
import App from './App';
import router from './router';

Vue.use(BootstrapVue);
Vue.use(Vuetify);
Vue.use(swal);

Error received in browser:

Uncaught SweetAlert: 1st argument ('function Vue (options) {
if ("development" !== 'production' &&
!(this instanceof Vue)
) {
warn('Vue is a constructor and should be called with the new
keyword');
}
this._init(options);
}') is invalid

Why not try to use this package https://github.com/anteriovieira/vue-swal#readme — julian salas, Aug 14 '18 at 02:31
Moved to this plugin because I was getting a different error with vue-swal dealing with being unable to use a declaration file and that it implicitly had 'any' type. So yeah... — Darren Cook, Aug 14 '18 at 02:37
I doubt you can simply `Vue.use()` the `swal` module as it wouldn't adhere to Vue's [plugin requirements](https://vuejs.org/v2/guide/plugins.html). What **exactly** are you trying to do? — Phil, Aug 14 '18 at 02:41
Unless I am missing something, that is exactly how it says to set it up in the docs. And I am trying to use it to display messages after http posts, but I am not getting that far with it. The error occurs at ```Vue.use()```. — Darren Cook, Aug 14 '18 at 02:52
Wow - and exactly how would this not adhere to Vue's plugin requirements, @Phil? This method of loading a plugin is shown right there in the link that you provided. — Darren Cook, Aug 14 '18 at 02:58
Unless I'm missing something, the `sweetalert` module (ie what you get from `import swal from 'sweetalert'`) doesn't have an `install` method which is what is detailed in the Vue documentation linked above. I'd recommend one of the pre-made Vue / Sweetalert wrappers like https://www.npmjs.com/package/vue-sweetalert2 — Phil, Aug 14 '18 at 04:08

Phil · Accepted Answer · 2018-08-14T05:32:45.410

As mentioned in the comments, the sweetalert module (from https://www.npmjs.com/package/sweetalert) is not a Vue plugin so you cannot use it in...

Vue.use(swal)

What you can do is create a plugin. For example, this will add the swal() function to Vue as a global method (Vue.swal()) and an instance method (this.$swal())

import Vue from 'vue'
import swal from 'sweetalert'

Vue.use({
  // this is the required "install" method for Vue plugins
  install (Vue) {
    Vue.swal = swal
    Vue.prototype.$swal = swal
  }
})

I highly recommend using an existing Vue plugin like vue-sweetalert2 though.

Vue.use(plugin) causing error: Vue is a constructor and should be called with the `new` keywor

1 Answers1