Tengo un proyecto Laravel 8, con vue-sweetalert2 instalado. Me gustaría definir el comportamiento de Toast una vez y luego llamarlo dentro de mis componentes.
Por ahora tengo este código:
/js/components/Mypage.vue
<script> export default { data: function () { return { ... }; }, mounted() { ... }, methods: { myMethod: function () { const Toast = this.$swal.mixin({ toast: true, showConfirmButton: false, timer: 2000, timerProgressBar: false, }); axios .post("/api/something") .then((res) => { Toast.fire({ icon: "success", title: "Tessera rinnovata", }); }); ... </script>Esto funciona bien, por supuesto, pero como puede ver, Toast está definido dentro del método y no puedo reutilizarlo en otro lugar.
Me gustaría definirlo dentro de app.js (tal vez) y luego acceder a él en todas partes, pero si muevo el código dentro de app.js tal como está, recibo un error que me dice que $swal no está definido. Traté de usar Swal en lugar de $swal... nada cambió.
/js/aplicación.js
import VueSweetalert2 from "vue-sweetalert2"; import "sweetalert2/dist/sweetalert2.min.css"; window.Vue = require("vue").default; import VueRouter from "vue-router"; Vue.use(VueRouter); Vue.use(VueSweetalert2); const Toast = $swal.mixin({ toast: true, showConfirmButton: false, timer: 2000, timerProgressBar: false, });Entonces, ¿cómo puedo definir el Toast una vez?
Parece que está intentando configurar la instancia de SweetAlert ( this.$swal en sus componentes) con opciones de inicialización. Eso podría hacerse al instalar el complemento vue-sweetalert . El segundo argumento de Vue.use() es para las opciones del complemento:
// js/app.js import Vue from 'vue' import VueSweetAlert from 'vue-sweetalert2' Vue.use(VueSweetAlert, { toast: true, showConfirmButton: false, timer: 2000, timerProgressBar: false, })