Step 01: installing sweetalert npm package
npm install -S vue-sweetalert2
Step 02: importing sweetalert css in app.css
@import 'sweetalert2/dist/sweetalert2.min.css';
Step 03: importing sweetalert js in app.js
// at the top import VueSweetalert2 from 'vue-sweetalert2'; createApp(App) .use(router) .use(VueSweetalert2) .mount('#app')
Step 04: Using swal() method of sweetalert inside issues.js composable during inserting and updating
// at the top
import { ref, inject } from 'vue'
export default function useIssues() {
...
const swal = inject('$swal')
const storeIssue = async (issue) => {
......
axios.post('/api/issues', issue)
.then(response => {
router.push({ name: 'issues.list' })
swal({
icon: 'success',
title: 'Issue saved successfully'
})
})
.....
}
const updateIssue = async (issue) => {
....
axios.put('/api/issues/' + issue.id, issue)
.then(response => {
router.push({ name: 'issues.list' })
swal({
icon: 'success',
title: 'Issue updated successfully'
})
})
......
}
}
Now after saving or updating sweetalert notification will be triggered showing saved or updated messages.