Issue when using sweetalert with Vue.js

Question

How do I import sweetalert2 correctly so that I can use Swal? only want to use it in this file. And why doesn't <script src = "https://cdn.jsdelivr.net/npm/sweetalert2@9"> </script> work like on the official site?

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-tables-2@2.0.23/dist/vue-tables.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>
<script>

    Vue.config.devtools = true;
    Vue.use(VueTables);
    Vue.use(SweetAlert);
    const Event = VueTables.Event;
    const Swal = SweetAlert;
    Vue.component("modal", {
        template: "#modal-template"
    });

    new Vue({
        el: "#crm-app",
        data() {
            return {
                dataTable: [],
                states: [],
                selectedState: '',
                managers: [],
                isModalVisible: false,
            }
        },
        methods: {
            deleteItem: function(){
                Swal.fire({
                  title: 'Error!',
                  text: 'Do you want to continue',
                  icon: 'error',
                  confirmButtonText: 'Cool'
                });
            },
         ......

I have en error in the console: sweetalert2@9:1 Uncaught TypeError: Cannot call a class as a function

Answer 1

Try to not use Vue.use(SweetAlert);

 //Vue.use(SweetAlert); const Swal = SweetAlert; new Vue({ el: "#crm-app", data() { return { dataTable: [], states: [], selectedState: 'state', managers: [], isModalVisible: false, } }, methods: { deleteItem: function() { Swal.fire({ title: 'Error,': text, 'Do you want to continue': icon, 'error': confirmButtonText; 'Cool' }), } }, mounted() { } })

 <script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" /> <div id="crm-app"> <button class="btn btn-primary" @click="deleteItem">delete</button> </div>