Hello there guys, in this tutorial will look at how to remove flash messages using the Alpine Js framework.
Let’s get started.
Step 1
Head over to this website and copy the URL of the javascript. Paste the URL inside your blade template. For mine, it should be like this…
admin.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<title>@yield('title') - {{ config('app.name') }}</title>
<link rel="shortcut icon" type="image/jpg" href="{{asset('images/40 x 40 circle-cropped_image.png')}}"/>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="csrf-token" content="{{ csrf_token() }}">
<!--styles-->
<link rel="stylesheet" href="{{asset('css/style.css')}}">
<link rel="stylesheet" type="text/css" href="{{ asset('css/valiadmin.css') }}" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" />
<link rel="stylesheet" href="{{asset ('css/themes/prism.css') }}">
<!--Fonts-->
<link rel="stylesheet" type="text/css" href="{{ asset('css/font-awesome/4.7.0/css/font-awesome.min.css') }}"/>
@yield('styles')
</head>
<body class="app sidebar-mini rtl">
@include('admin.partials.header')
@include('admin.partials.sidebar')
<main class="app-content" id="app">
@yield('content')
</main>
<script src="{{ asset('js/jquery-3.2.1.min.js') }}"></script>
<script src="{{ asset('js/popper.min.js') }}"></script>
<script src="{{ asset('js/bootstrap.min.js') }}"></script>
<script src="{{ asset('js/main.js') }}"></script>
<script src="{{ asset('js/plugins/pace.min.js') }}"></script>
<script src="//unpkg.com/alpinejs" defer></script> // from Alpine Js websiteRemember this is a website I created before using laravel and other frontend languages. So the admin.blade.php represents the admin side of my website. You can look at this video to get the hang of it.
Step 2
Head over to your index.blade.php or whichever blade template you are using to present the admin side. For this one, it represents the admin dashboard. So have this code above.
index.blade.php
@extends('layouts.admin')
@section('content')
<div class="container">
<div class="row">
<div class="col">
@if(Session::has('message'))
<div x-data="{show: true}" x-init="setTimeout(() => show = false, 2500)" x-show="show"
class="alert alert-success alert-dismissible">
{{ Session('message') }}
</div>
@endif
</div>From the code above the part that has the @if session is where the logic is. So what am doing is setting the show function true first to display the flash message then the show function will show false after 2500 seconds. The flash message disappears after the given set timeout.
Now you need to have the session flash message set in one of your controllers. This is what mine looks like…
PostsController.php
Session::flash('message', 'Post created successfully');
return redirect()->route('posts.index');Since this isn’t a beginner tutorial, you can watch the video below to understand it better.