Adding sweetalert for notification during inserting and updating

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.

Related Posts


Seeding users and role_user data

Seeding clients and issues data

Adding client column in table

Storing issue in db table

Update issue

Showing user data and logout

Permission securing backend

Permission securing frontend