Laravel package to create beautiful common views like tables using only PHP code, inspired by Laravel Nova, these views are built with Laravel Livewire and styled using Tailwind CSS
- Version compatibility
- Installation and basic usage
- First table view
- Rendering a view
- Components customization
- Table view
- Grid view
- Contributing
- Roadmap
| Laravel views | Livewire | Laravel |
|---|---|---|
| 2.x | 2.x | 7.x, 8.x |
| 1.x | 1.x | 5.x, 6.x |
composer require laravel-views/laravel-viewsphp artisan vendor:publish --tag=public --forceor you can specify the provider
php artisan vendor:publish --tag=public --provider='LaravelViews\LaravelViewsServiceProvider' --forceIf you are updating this package you might need to republish these assets.
Add the following Blade directives in the head tag, and before the end body tag in your template
<html>
<head>
...
@laravelViewsStyles
</head>
<body>
...
@laravelViewsScripts
</body>
</html>These blade directives are also including Laravel livewire styles and scripts, after that you may need to clear the view cache
php artisan view:clearThis is a basic usage of a table view, you can read the full table view documentation
Once you have installed the package and included the assets you can start to create a basic table view.
php artisan make:table-view UsersTableViewWith this artisan command a UsersTableView.php file will be created inside app/Http/Livewire directory.
The basic usage needs a data repository (Eloquent query), headers and rows, you can customize the items to be shown, and the headers and data for each row like this example
<?php
namespace App\Http\Livewire;
use LaravelViews\Views\TableView;
use Illuminate\Database\Eloquent\Builder;
use App\User;
class UsersTableView extends TableView
{
public function repository(): Builder
{
return User::query();
}
public function headers(): array
{
return ['Name', 'Email', 'Created', 'Updated'];
}
public function row($model)
{
return [$model->name, $model->email, $model->created_at, $model->updated_at];
}
}The easiest way to render the view is using the facade directly with a blade file
{!! LaravelViews::create(App\Http\Livewire\UsersTableView::class)->render() !!}At this point, you would be able to see a table with some data, the table view doesn't have any styled container or title as the image example, you can render the table view inside any container you want.
In the example above the view is using the User model created by default in every Laravel project, feel free to use any model you have, the method row is receiving a sinlge model object and you can use any property or public method you have difined inside your model.
This is the basic usage of the table view, but you can customize it with more features.
Read the full table view documentation
The easiest way to render a view is using the facade directly on the blade file as the example above,
but it is a better practice if you inject a LaravelViews instance as a dependency in your controller.
use use LaravelViews\LaravelViews;
public function index(LaravelViews $laravelViews)
{
$laravelViews->create(App\Http\Livewire\UsersTableView::class);
return view('my-view', [
'view' => $laravelViews
]);
}And render it in your blade file
{!! $view->render() !!}You can also return the view directly from your controller and specify the layout and section of your layout
use use LaravelViews\LaravelViews;
public function index(LaravelViews $laravelViews)
{
$laravelViews->create(App\Http\Livewire\UsersTableView::class)
->layout('layout', 'section-name');
return $laravelViews->render();
}In the same way that you would send data to your views, you can send more data to the layout file
use use LaravelViews\LaravelViews;
public function index(LaravelViews $laravelViews)
{
$laravelViews->create(App\Http\Livewire\UsersTableView::class)
->layout('layout', 'section-name', [
'title' => 'My layout title'
]);
return $laravelViews->render();
}These views are build with Tailwind CSS and you can either change the colors of the components following tailwindcss utilities or fully customize all the html of the components
If you are using Tailwind CSS or if you don't have issues using Tailwindcss and your own css styles, you can customize some utilities to change the color for each variant of the components publishing a config file
php artisan vendor:publish --tag=configor you can specify the provider
php artisan vendor:publish --tag=config --provider='LaravelViews\LaravelViewsServiceProvider'Inside this config file you can change the colors for each component variant. If you are updating this package you might need to republish this config file.
If you are not using taildwindcss, or if you want to have a full customization over the html components, you can publish all the blade files used for these views.
php artisan vendor:publish --tag=viewsor you can specify the provider
php artisan vendor:publish --tag=views --provider='LaravelViews\LaravelViewsServiceProvider'If you are updating this package you might need to republish these views.
Check the contribution guide
Laravel Views is still under heavy development so I will be adding more awesome features and views.
Here's the plan for what's coming:
- New grid view to display data as a grid instead of as a table
- Add tooltips to actions buttons
- Add confirmation message on actions
- Add a download action
- Add translations
- Add sortable columns
- Add links as a UI helpers