spatie / laravel-javascript-views
Requires
- php: ^7.2
- illuminate/contracts: ~5.8.0
- illuminate/support: ~5.8.0
- illuminate/view: ~5.8.0
Requires (Dev)
- larapack/dd: ^1.0
- phpunit/phpunit: ^8.0
This package is auto-updated.
Last update: 2019-06-09 02:19:48 UTC
README
Mount JavaScript components as full page documents in Blade views.
As a full page document:
namespace App\Http\Controllers; use App\User; class UsersController { public function index() { $users = User::all(); return mount('users', [ $users => 'users', ]); } }
As a widget in a view:
<section> <h1>Media</h1> @mount('media-uploader', [ 'initial' => $media, ]) </section>
With Webpack, you can register all components under a root path so mount
behaves just like Laravel Blade views.
resources/
js/
components/
admin/
dashboard.js
app.js
return mount('admin.dashboard', $data);
Installation
You can install the package via composer:
composer require spatie/laravel-javascript-views
Next, you'll need to set up the package in your scripts. Assuming you're using Webpack (or Laravel Mix), this will register all Vue components in the specified directory.
import views from 'laravel-javascript-views'; import vue from 'laravel-javascript-views/vue'; import createComponents from 'laravel-javascript-views/webpack'; const context = require.context('./pages', true, /\.js$/); views.load(createComponents(context, vue)); views.mount();
React is also supported:
import views from 'laravel-javascript-views'; import react from 'laravel-javascript-views/react'; import createComponents from 'laravel-javascript-views/webpack'; const context = require.context('./pages', true, /\.js$/); views.load(createComponents(context, react)); views.mount();
Usage
As documents
mount
works just like a Laravel view. You can pass data as the second function argument, or by chaining with
calls.
return mount('admin.dashboard', ['stats' => $stats]);
return mount('admin.dashboard')->with(['stats' => $stats]);
return mount('admin.dashboard')->with('stats', $stats);
The component will be mounted in a configured layout view. The default layout can be set in config.
<?php return [ 'layout' => 'layouts.app', ];
The above expects a layouts.app
Blade view to exist that echoes a $slot
variable where the component should be mounted.
<!doctype html> <html> <head> ... <script defer src="{{ mix('js/app.js') }}"></script> </head> <body> {{ $slot }} </body> </html>
As widgets
@mount
works just like a Blade @include
directive. You can pass data as the second directive argument.
@mount('media-uploader', [ 'initial' => $media, ])
View composers
views is compatible with your application's existing view composers. All data will be passed as props to the created component.
JavaScriptView::composer('profile.*', function ($view) { $view->with('user', Auth::user()); });
With Turbolinks
If you're building a Turbolinks application, you'll need to mount the components on every page load.
window.addEventListener('turbolinks:load', () => { views.mount(); });
Testing
composer test
Changelog
Please see CHANGELOG for more information on what has changed recently.
Contributing
Please see CONTRIBUTING for details.
Security
If you discover any security related issues, please email freek@spatie.be instead of using the issue tracker.
Postcardware
You're free to use this package, but if it makes it to your production environment we highly appreciate you sending us a postcard from your hometown, mentioning which of our package(s) you are using.
Our address is: Spatie, Samberstraat 69D, 2060 Antwerp, Belgium.
We publish all received postcards on our company website.
Credits
Support us
Spatie is a webdesign agency based in Antwerp, Belgium. You'll find an overview of all our open source projects on our website.
Does your business depend on our contributions? Reach out and support us on Patreon. All pledges will be dedicated to allocating workforce on maintenance and new awesome stuff.
License
The MIT License (MIT). Please see License File for more information.