iconicline.com

To display flash messages using Vue.js in Laravel, you can follow these steps. This example assumes you are using Laravel as a backend API and Vue.js for the frontend.

Step 1: Install Laravel and Set Up API

If you haven't already, set up a Laravel project and create the necessary API routes and controllers for your application.

Step 2: Install Vue.js

You can use Laravel Mix to set up Vue.js easily. Install the required packages:

npm install

Step 3: Create a FlashMessage Component

Create a Vue component to handle flash messages. For example, in your resources/js/components/FlashMessage.vue:

<template>
  <div v-if="message" class="flash-message">
    {{ message }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "",
    };
  },
  watch: {
    $route(to, from) {
      this.message = "";
    },
  },
  methods: {
    showMessage(message) {
      this.message = message;
      setTimeout(() => {
        this.message = "";
      }, 3000);
    },
  },
};
</script>

<style scoped>
.flash-message {
  position: fixed;
  top: 20px;
  right: 20px;
  background-color: #28a745;
  color: #fff;
  padding: 10px;
  border-radius: 5px;
}
</style>

Step 4: Use the FlashMessage Component in Your Layout

Include the FlashMessage component in your main layout file, for example, resources/views/layouts/app.blade.php:

<!DOCTYPE html>
<html lang="en">
<head>
 <!-- Your head content -->
</head>
<body>
 <div id="app">
   <flash-message></flash-message>
   <!-- Your other content -->
 </div>
 <script src="{{ mix('js/app.js') }}"></script>
</body>
</html>

Step 5: Emit Flash Messages from API Responses

In your Vue component where you handle API responses (e.g., in a Vue method), emit a flash message event:

// In your Vue component method
axios.post('/api/some-endpoint')
 .then(response => {
   // Handle success
   this.$root.$emit('flashMessage', 'Success message!');
 })
 .catch(error => {
   // Handle error
   this.$root.$emit('flashMessage', 'Error message!');
 });

Step 6: Listen for Flash Messages in FlashMessage Component

In your main app.js file (or wherever you initialize Vue), listen for the flash message events:

import Vue from 'vue';
import FlashMessage from './components/FlashMessage.vue';
const app = new Vue({
 el: '#app',
 components: {
   FlashMessage,
 },
 mounted() {
   this.$root.$on('flashMessage', (message) => {
     this.$refs.flashMessage.showMessage(message);
   });
 },
});

Step 7: Test

Run your Laravel development server:

php artisan serve

Visit your application, trigger some API actions, and verify that the flash messages are displayed using Vue.js.

This is a basic example, and you may need to adapt it based on your specific project structure and requirements. Additionally, you may want to explore Vue.js state management libraries like Vuex for more complex scenarios.

Display Flash Message Using Vue Js in Laravel