This package adds some features to make it easier to work with components and html tags in laravel blade.
<AppLayout>
<Slot title>BladeX</Slot>
<MyButton type="primary">Click here</MyButton>
</AppLayout>
- Php 8.1 or higher
- Laravel 10.0 or 11.0
Install the package with composer:
composer require rapid/bladex
Then clear the compiled view caches to recompile blade files:
php artisan view:clear
BladeX converts the components tag into proper php code at compile time! Some operations are not at runtime.
This means that if you change something that doesn't recompile the source file, but affects the code, you have to clear the compiled caches to recompile:
php artisan view:clear
You can call components by <HtmlTag>
in anywhere you want!
The component call name should be PascalCase
, but the file name should be kebab-case
.
Every folder named components
is a component path.
Exmaples:
View Path | Tag Name | View-Based Name |
---|---|---|
components/button.blade.php |
Button |
button |
components/button/red.blade.php |
Button.Red |
button.red |
components/button/index.blade.php |
Button |
button |
componets/posts/post-card.blade.php |
Posts.PostCard |
posts.post-card |
posts/components/post-card.blade.php |
Posts.PostCard |
posts.post-card |
posts/actions/components/del.blade.php |
Posts.Actions.Del |
posts.actions.del |
Just type <TagName>
:
<Button class="bg-red-500">Delete</Button>
<Button.Red>Cancel</Button.Red>
<Posts.PostCard :post="$post" />
Note: If the component file is not found at compile time, the component will not compile.
In the blade, you must write <x-slot name="slot_name">
to define slot value.
But in BladeX, just type <Slot slot_name>
:
<Dropdown>
Select Option
<Slot options>
<li>Option 1</li>
<li>Option 2</li>
</Slot>
<Slot icon>
<svg>...</svg>
</Slot>
</Dropdown>
If you want to call component by alias (like programming use keyword), you can use magic blade directive @use
:
@use(Posts.Actions.Del)
<Del :post="$post" />
Add as
keyword to set alias:
@use(Posts.Actions.Del as PostDelete)
<PostDelete :post="$post" />
You can also use a component folder:
@use(Posts.Actions as PostAct)
<PostAct.Del :post="$post" />
If you want to use it by specifying the view path, you can use this syntax:
@use('home.post' as Post)
<Post />
<!-- Automatically convert 'app-layout' to 'AppLayout' as alias! -->
@use('layout.app-layout')
<AppLayout />
If you want to use all components in same directory/name, you can write @use
directive with .*
suffix:
@use(Posts.Actions.*)
<!-- Calls <Posts.Actions.Del> if exists -->
<Del :post="$post" />
<!-- Calls <Posts.Actions.Create> if exists -->
<Create :post="$post" />
@use('layouts.*')
<!-- Calls 'layouts.app-layout.blade.php' if exists -->
<AppLayout>
Hello World
</AppLayout>
Note: Try not to spam this feature.
Because this feature searches among the files and slows down the compiling view
However, all lookups are done at compile time only. So don't worry about the slowness of the website :)
You can create layouts with BladeX. For example:
- layouts/app.blade.php
<html lang="en">
<head>
<title>{{ $title }}</title>
</head>
<body>
{{ $slot }}
</body>
</html>
- index.blade.php
@use('layouts.app' as AppLayout)
<AppLayout>
<Slot title>BladeX</Slot>
Welcome to BladeX!
</AppLayout>
You don't need
@use
tag anymore if you create.blade.php
configuration file! More Info
Layout equals to @extends
, but only adds layouts.
name to your view name.
For example @layout('guest')
converts to @extends('layouts.guest')
and @layout('admin.main')
to @extends('admin.layouts.main')
@layout('guest')
@section('content')
<h1>Hello World</h1>
@endsection
Also, you can use components for layouts.
Partial equals to @include
, but only adds partials.
name to your view name.
For example @partial('edit')
converts to @include('partials.edit')
and @partial('admin.delete')
to @include('admin.partials.delete')
<AppLayout>
@partial('users.my-info')
</AppLayout>
You can use @
in @include
, @use
, @layout
, @extends
, @partial
to use current path reference.
- admin/dashboard.blade.php:
@use('admin.btn-create')
@use('@btn-create')
@include('admin.partials.create-user')
@include('@partials.create-user')
@partial('@create-user')
Add the .blade.php
file wherever you want to apply the sub files:
<?php
# Note: After editing this source, run `php artisan view:clear` one time.
return [
# Use components alias
'use' => [
// Example:
// 1- 'Posts.PostCard'
// 2- 'posts.post-card'
// 3- 'Buttons.Red' => 'Alias',
// 4- 'Buttons.*'
],
];
For example, create file resources/views/.blade.php
with the following content:
<?php
# Note: After editing this source, run `php artisan view:clear` one time.
return [
# Use components alias
'use' => [
// Example:
// 1- 'Posts.PostCard'
// 2- 'posts.post-card'
// 3- 'Buttons.Red' => 'Alias',
// 4- 'Buttons.*'
'layouts.app' => 'AppLayout',
'layouts.guest' => 'GuestLayout',
],
];
Now, you can use layouts with components in any blade files in resources/views
<AppLayout>
<p>Content</p>
</AppLayout>
- Telegram: @Mahdi_Saremi
- Instagram: @mahdi_saremi_org