Courses

Vue.js 3 + Laravel 11 + Vite: SPA CRUD

SweetAlert for Notifications

Summary of this lesson:
- Installing and configuring SweetAlert2 package
- Implementing success notifications
- Setting up notification system in composables
- Managing global notification states

Now when we create a new post or edit a post, there are no notifications about successful action. In this lesson, we will add a notification using sweetalert2.

sweet alert message


To add sweetalert notifications, we will use a package avil13/vue-sweetalert2. First, let's install it.

npm install -S vue-sweetalert2

Next, we need to import styles and import/use the plugin in the main app.js file.

resources/css/app.css:

@import 'sweetalert2/dist/sweetalert2.min.css';
 
@tailwind base;
@tailwind components;
@tailwind utilities;

resources/js/app.js:

import './bootstrap';
 
import { createApp } from 'vue'
import App from './layouts/App.vue'
 
import router from './routes/index'
import VueSweetalert2 from 'vue-sweetalert2';
 
createApp(App)
.use(router)
.use(VueSweetalert2)
.mount('#app')

Now we need to call sweetalert in the posts Composable, after a successful...

The full lesson is only for Premium Members.
Want to access all 27 lessons of this course? (115 min read)

You also get:

  • 69 courses (majority in latest Laravel 11)
  • Premium tutorials
  • Access to repositories
  • Private Discord