jshannon63 / laravel-baton
Share named routes and other collection data to Javascript from your Laravel Blade views
Requires
- php: >=7.0.0
- laravel/framework: ^5.5
This package is not auto-updated.
Last update: 2024-11-15 07:37:50 UTC
README
Baton registers a global view composer which will enable passing of the Baton collection to all views. The Baton collection contains all named routes (optional) as well as any additional values you wish to add to the collection prior to rendering the view.
If you are looking for a more flexible package which is specifically designed to pass only named routes to the client I would recommend tightenco/ziggy. It gives many more options for that function. Baton is a good choce when you would like the flexibility of working with collections and quickly/easily passing that data to javascript.
Installation
composer require jshannon63/laravel-baton
Laravel 5.5+ will automatically take care of the service provider registration.
Usage
Configuration:
Baton will by default pass named routes to the rendered view. If you wish to disable this action, add the following line to your .env file.
BATON_ROUTES = false // Disable returning named routes in Baton
By default, Baton contains a collection of named routes called "routes":
array:1 [▼ "routes" => Collection {#201 ▼ #items: array:9 [▼ "blogs" => Collection {#206 ▼ #items: array:2 [▼ "uri" => "blog" "methods" => array:2 [▼ 0 => "GET" 1 => "HEAD" ] ] } "login" => Collection {#205 ▶} "logout" => Collection {#216 ▶} "register" => Collection {#217 ▶} "password.request" => Collection {#218 ▶} "password.email" => Collection {#219 ▶} "password.reset" => Collection {#220 ▶} "home" => Collection {#221 ▶} "about" => Collection {#222 ▶} ] } ]
Adding additional data to Baton before passing on to the view
Baton is an extension of the Collection class. You may add, manuipulate or remove any collection elements using the methods of Illuminate\Support\Collection.
Example to add a Blog article to Baton:
First, create a real time Facade for Baton as follows
use Facades/Jshannon63/Baton/Baton;
Then access the put method of Baton using the Facade.
Baton::put( 'article', Blog::find(1) );
Rendering Baton data in a view
The {!!baton!!} declaration will be replaced with a javascript compliant variable declaration. Notice that the syntax used to embed our $baton variable in the blade view will prevent escaping by the htmlspecialchars() function. You may place {!!$baton!!} anywhere in your view. You may choose to make it available as window.baton or even within a Vue component or other javascript implementation.
This is before rendering...
... <!-- JAVASCRIPT --> <script type="text/javascript" src="/js/app.js"></script> <script type="text/javascript"> {!!$baton!!} </script> <!-- END JAVASCRIPT --> </body> </html>
This is after rendering...
... <!-- JAVASCRIPT --> <script type="text/javascript" src="/js/app.js"></script> <script type="text/javascript"> var baton = JSON.parse('{"routes":{"blogs":{"uri":"blog","methods":["GET","HEAD"]},"login":{"uri":"login","methods":["GET","HEAD"]},"logout":{"uri":"logout","methods":["POST"]},"register":{"uri":"register","methods":["GET","HEAD"]},"password.request":{"uri":"password\/reset","methods":["GET","HEAD"]},"password.email":{"uri":"password\/email","methods":["POST"]},"password.reset":{"uri":"password\/reset\/{token}","methods":["GET","HEAD"]},"home":{"uri":"home","methods":["GET","HEAD"]},"about":{"uri":"about","methods":["GET","HEAD"]}}}'); </script> <!-- END JAVASCRIPT --> </body> </html>
In the above example, the blog route uri is available on the client side as window.baton.routes.blogs
Contributing
If you would like to contribute refer to CONTRIBUTING.md