erikgall/flash-alert

Full width VueJS flash alerts

Laravel/VueJS Flash Alerts

Requirements

1. Laravel
2. Laravel Elixir
3. VueJS
4. Laravel-Elixir-Vueify

Installation

1. Run the following command from your project root:

composer require erikgall/flash-alert, _(*1)

1. Add the following line to your service providers in your config/app.php file:

EGALL\FlashAlert\FlashAlertServiceProvider::class, _(*2)

1. In the command line run the following command to publish the assets:

php artisan vendor:publish, _(*3)

1. Import the component like such (assuming your are inside your main app.js located at resources/assets/js):

 import FlashAlert from './components/flash-alert.vue';

1. Add the component to your VueJs components

new Vue({
    el: '#app',
    components: {
        FlashAlert
    }
});

1. Add the following line to your main blade layout file. This line must be wrapped in a div#app

    @include('vendor.flash.alert')

1. Add the sass file to your main app.sass file:

@import "vendor/alert";
// For animations the package includes a sass copy of animate.css
@import "vendor/animate";

1. Run gulp

Usage

The easiest way to use the package is in your controller like so:, _(*4)

class AuthController extends Controller {

    public function login() {

        // Login Success
        alert()->success('You have been successfully signed in.')->autohide(4000);

        return redirect()->to('/users');

    }

}