protonemedia / laravel-splade

💫 The magic of Inertia.js with the simplicity of Blade 💫 - Splade provides a super easy way to build Single Page Applications (SPA) using standard Laravel Blade templates, and sparkle it to make it interactive. All without ever leaving Blade.

Laravel Splade

The magic of Inertia.js with the simplicity of Blade.

Splade provides a super easy way to build Single Page Applications (SPA) using standard Laravel Blade templates, enhanced with renderless Vue 3 components. In essence, you can write your app using the simplicity of Blade, and besides that magic SPA-feeling, you can sparkle it to make it interactive. All without ever leaving Blade.

Update February 23, 2024: Thoughts on Splade

After 18 months, I took a week to reflect on Splade and its future. Please read my blog post if you're interested in Splade!

Sponsor Splade

❤️ We proudly support the community by developing Laravel packages and giving them away for free. If this package saves you time or if you're relying on it professionally, please consider sponsoring the maintenance and development. Keeping track of issues and pull requests takes time, but we're happy to help!

Features

Splade gives you a massive head start when building applications. Navigate the documentation or watch the videos to discover its power, but to give you a glance, here's a short overview of some of the best features:

• Splade allows you to use the Laravel Blade template engine and build a single-page application using regular server-side routing without building an API. You still have the full power of Vue.js when you need it.
• Splade aims to stick as close as possible to the default Laravel features and development flow.
• Automatic installer and support for the Laravel Breeze starter kit.
• Besides the SPA navigation features, it has more than 20 interactive components that are huge timesavers.
• Most components are functional and unstyled, giving you complete control over the implementation.
• Other components are styled with Tailwind CSS 3.0, but can be fully customized by publishing the Blade templates. You don't need to rebuild or recompile any JavaScript for this.
• Built-in support for Modals and Slideover that can show any route or pre-loaded content.
• Beautiful Form Components with support for Validation and (Eloquent) Model binding. Built-in integration with Autosize, Choices.js, FilePond, and Flatpickr, including async file uploads.
• DataTables-like Table component that supports auto-fill, bulk actions, exports, searching, sorting, and more!
• Support Lazy Loading (templates and data), Persistent Layout, Animations, and Teleports.
• Laravel Echo integration to control browser behavior from the backend (redirecting, refreshing, and showing a toast).
• Built-in SEO (title, description, keywords) with support for Open Graph and Twitter tags.
• Support for custom Blade and Vue components.
• Support for existing Blade and Vue libraries.
• Support for SSR (server-side rendering).

Discord, Documentation and Website

📖 You can find the documentation at Splade.dev (and here its source code). You may also join the Splade Discord server.

🌎 The website is also open source, and built with Splade!

Video

📺 Check out the introduction video, or click here for the YouTube Playlist with all Splade videos.

Changelog

Please see CHANGELOG for more information what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Other Laravel packages

• Laravel Analytics Event Tracking: Laravel package to easily send events to Google Analytics.
• Laravel Blade On Demand: Laravel package to compile Blade templates in memory.
• Laravel Cross Eloquent Search: Laravel package to search through multiple Eloquent models.
• Laravel Eloquent Scope as Select: Stop duplicating your Eloquent query scopes and constraints in PHP. This package lets you re-use your query scopes and constraints by adding them as a subquery.
• Laravel Eloquent Where Not: This Laravel package allows you to flip/invert an Eloquent scope, or really any query constraint.
• Laravel Form Components: Blade components to rapidly build forms with Tailwind CSS Custom Forms and Bootstrap 4. Supports validation, model binding, default values, translations, includes default vendor styling and fully customizable!
• Laravel MinIO Testing Tools: This package provides a trait to run your tests against a MinIO S3 server.
• Laravel Mixins: A collection of Laravel goodies.
• Laravel Paddle: Paddle.com API integration for Laravel with support for webhooks/events.
• Laravel Verify New Email: This package adds support for verifying new email addresses: when a user updates its email address, it won't replace the old one until the new one is verified.
• Laravel WebDAV: WebDAV driver for Laravel's Filesystem.
• Laravel XSS Protection Middleware: Laravel Middleware to protect your app against Cross-site scripting (XSS). It sanitizes request input by utilising the Laravel Security package, and it can sanatize Blade echo statements as well.

Security

If you discover any security related issues, please email [email protected] instead of using the issue tracker.

Credits

• Pascal Baljet
• All Contributors

License

The MIT License (MIT). Please see License File for more information.

laravel-splade's Issues

Documentation

For documentation issues/suggestions, please visit this repo: https://github.com/protonemedia/laravel-splade-docs

[Feature Request] External Redirect

What if I want to redirect to an external URL from a controller?

Inertia has the feature.

Using Filepond Library for handling file uploading

Hey there!

I really think it would be cool if we could use Filepond for file uploading. It makes things so clean and expressive.

What do you think?

Classes on Splade Form

Is there a way to add classes to the Form component?
I was thinking to move the {!! $attributes !!} to the <form> but wasn't sure if that would have side-effects.

Debounce on search input field

Search input debounce time

can we set debounce time for search input?

Feature request TipTap editor

Would be good to have a rich textarea with https://tiptap.dev/

How to call JS functions?

Is it possible to call a JS (windows) function from a blade component.

It seems like anything in a script tag causing an template compilation error: Tags with side effect (<script> and <style>) are ignored in client component templates errors

Modal is broken

With the latest release (0.6.2), the modal seems to be broken. Putting the modal to a different size doesn't work at all. Just the default size is working. It only works if I manually change the size with raw CSS by putting a Style tag on the modal element which, however, breaks the modal as it can't inherit the style attribute.

Multiple Features Requested!!!

Hello,

1. It would be great to instead be able use the web middleware instead of a custom one considering so many Laravel packages rely on it and not yours.
2. While installing the Breeze demo app in the documentation many of your references don't coincide with the blade files
   (especially routes and views in the breeze demo plugin).. none of them have Vue components that are used as examples. I actually dont see anything Vue related in it..
   Example: Link component isn't used for any routes in the blade files...
3. It would be nice to also have a library of .vue components to be able to reference to for building the app...

I am not criticizing. I am just asking for a feature/enhancement. Thanks!

Async loading of Select options

It would be nice if we could load the options for a <x-select> element asynchronously, optionally with a variable URL.

<x-splade-select
    name="country_code" 
    options-url="https://api.com/countries" />

<x-splade-select
    name="city" 
    v-bind:options-url="`https://api.com/countries/${form.country_code}/cities`" />

Maybe this makes sense for the x-splade-checkboxes and x-splade-radios components as well.

Open modals from vue components

I want to be able to open modals (which are basically views pointing to certain routes - like posts/create.blade.php. From the documenation there are just a few limited example usage to follow along. There's the this.$splade.visit, can this also open a modal? If yes, how?

Using or Call Vue component in blade

Call Vue component in blade or controller

do we can use or call Vue component with splade?

Automatic Installation doesn't work well on windows OS

In the command installation section there is a string search using PHP_EOL

 $search = 'public function register()' . PHP_EOL . '    {';

 $search = 'protected $routeMiddleware = [' . PHP_EOL;

It doesn't run well on windows OS because by default Http/Kernel.php and Exceptions/Handler.php files use \n .

while for PHP_EOL on windows use \r\n.

the result of the automatic installation on windows:
Http/Kernel.php

Exceptions/Handler.php

Can I use Livewire and Alpinejs with Splade.

Hi Pascal
Thank you for this amazing package.

This is not an issue but a question. I am not sure where to ask you, so posting here.

Can I use this package with Livewire and Alpinejs, as I am not able to find any information about Livewire + Splade in the documentation.

Thank you again for this awesome package.

Doesn't work for my existing platform, Please help

Hi @pascalbaljet
I am trying to install on the app which is already using alpine and I want to add Splade to it. but doesn't work and the blank page loads :(

The default data doesn't show when remember attribute is set

When I do it like this, it works perfectly fine. The word 'Laratips' is shown in the input file like so:

But, as soon as I write remember attribute, it does not show the default value. The input file becomes empty as shown here:

Redirect back doesn't update the view

Hello all,

in my case the view remain the same after redirecting back

Add Octane to test matrix

To see if there are any leaks.

Anchor links throw exceptions in console and make the links unusable

Hello,

I have set 'transform_anchors': false, however, the following link throws an exception in the console and also makes every other Link components to also fail:

<a  href="#pricing">Pricing</a>

Component select with choice.js enabled not work in modal

Choice.js do not when the view call in modal.

Why is tailwind required? Can we skip it?

From docs it implies Vue components are renderless.

So I was wondering why tailwind is needed. If one prefer other CSS library/framework, can they skip tailwind installation all together?

Thanks!

Refactor Tailwind classes to native CSS styling

There are still some Tailwind classes in Vue files that shouldn't be there. Although Splade comes with default Tailwind styling, it should be framework independent. This makes it easier for people to use other frameworks.

laravel-splade/lib/ServerError.vue

Lines 3 to 12 in 374a3cd

	class="
	w-screen
	h-screen
	fixed
	p-8
	bg-black bg-opacity-75
	inset-0
	z-[200000]
	box-border
	"

laravel-splade/lib/SpladeApp.vue

Line 11 in 374a3cd

'transition ease-in-out blur-sm': Splade.currentStack > 0,

Select option multiple values selected with choices js on based relations attached or assigned value

I try to select the permission that was already to attach the role but, from the model, I get the data [1,2,3] but the select option was not selected or was the attached value pre-selected, what I did a mistake?

as a option showing in both select option

Responsive column in SpladeTable

I did make a change in SpladeTable by adding a new prop to column named responsive.

When enabled then in th and td it's added a class for hide the cell by default and shown in certain breakpoint defined for each column using {$breakpoint}:table-cell.

Can I make PR for this?

Example in th:

            <th
                v-show="table.columnIsVisible(@js($column->key))"
                scope="col"
                class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
                :class="{
                    '{{ $column->responsive }}:table-cell hidden': @js($column->responsive)
                }"
            >

And in controller:

             SpladeTable::for($users)
                ->withGlobalSearch()
                ->defaultSort('-created_at')
                ->column(key: 'name', canBeHidden: false, sortable: true, searchable: true)
                ->column(key: 'email', sortable: true, searchable: true, responsive: 'lg')
                ->column(key: 'created_at', sortable: true, searchable: true, responsive: 'lg')
                ->column(key: 'actions', label: 'Actions');

I change the view body.blade.php, head.blade.php, and SpladeTable::column() method and Column class, by adding $responsive arguments which is default false:

    public function __construct(
        public string $key,
        public string $label,
        public bool $canBeHidden,
        public bool $hidden,
        public bool $sortable,
        public bool|string $sorted,
        public bool|string $responsive = false
    ) {
    }

method "PUT" sending empty response in edit.blade.php on submit .

[vite:css] Cannot read property 'config' of undefined

This error happen when trying to build via npm run build for both css file of choices and flatpickr. By commenting this file works fine:

//import "./Components/choices.scss";
//import "./Components/flatpickr.styl";

How to get relation data in form

How i can get attributes from relation into Spade Form?

Publish on npm, or provide packed JS build with composer?

If you're updating Splade, you must update with composer and npm. Does it make sense to provide a packed JS build with the composer package and import that into the main app JS file, or provide an Artisan command that can publish/update it? It doesn't feel very 'pure', but I can see people updating just either composer or npm and ending up with different versions of the JS and PHP package.

how can i pass default option selected in x-splade-select Component

How to use this.$splade.request

I have a Register.vue component
with a register method

register() {
        let registerPromise = this.$splade.request('/register', 'post', {'privateKey': this._privateKey, 'publicKey': this._publicKey}, {"X-Splade": false}, '/exchange')
        registerPromise.then((response) => {
            this.$splade.remember('sessionPrivateKey', response.data.privateKey, false)
            this.$splade.visit('/exchange')
        })

and the action should only return some data and not be visited (it's a POST request)
but the application frontend jumps to register, shows the return data as if it was an api
then goes to my visit('/exchange')

my action

public function register(Request $request)
    {
        //some code
        Toast::title('Your account has been requested!');
        Splade::share('sessionPrivateKey', bin2hex($keyPair->getPrivateKey()));
        
        return ['privateKey' => bin2hex($keyPair->getPrivateKey())];
    }

response is

{privateKey: "45c1feb303b20df0505af2a5170aba786bb060baf65a2bf4b74fc4599293d8f4", splade: {,…}}

Migrate Splade.dev to Splade

The website was built before Splade’s public release, but it would be cool to open-source it and migrate it to Splade.

Progress bar

First of all congrats for this great package!

Seem missing a progress bar when request take too much, something like in InertiaJS.

Thanks!

The request data on the POST request on x-splade-defer doesn't send the request data properly

On api.php, I have this route:

Then on a blade file, I tried to access it like this as shown in the documentation:

I am trying to send request data to the post request route, but the data seems to be sent to the server in a different way. It tries to convert whole json into a key and value will be null. I am just rendering the response in the blade file to test, and it looks like this:

Close-button attribute for x-splade-modal

It would be nice if you can set an attribute for x-splade-modal to show a default close-button (X) in the right upper corner.
This button can $emit('close') on click.

Modal or SlideOver on RowLink, how do I work to fun with this?

Hello! Hey, sorry about my english.
I am extremely confident in this new tool, which is much more flexible than other more popular ones out there. Thanks for your contribution! Despite not being so good, I will try to bring my difficulties and particularities about using the tool here for you.
I believe that the title itself already brings what I need, I know I can implement it in @cell, but... I wish there was this option for the whole line.

Validation errors are display on modals or slideover

Thanks for the wonderful package, Pascal. I am really liking it.

Create a simple form with a <x-splade-form> and wrap it in a <x-splade-modal> component. Load the page via <Link modal href="...">. Ensure you have set up the Laravel Validation Rules in a controller method.

The form will submit and you can see the validation errors on the Network tab. However, neither of the 2 options will display errors on the page.

<p v-text="form.errors.name" />

or

<x-splade-errors>
    <p v-if="errors.has('name')" v-text="errors.first('name')" />
</x-splade-errors>

When you remove the <x-splade-modal> wrapper, the validation errors are displayed on the page as expected.

Is is neccessary to use Tailwind ?

Hi

Thanks for the efforts for making such a amazing tool; but i am amazed and see in manual installation you have mentioned we need to setup Tailwind ? is it neccesary to use it i mean what if i want to use Bootstrap or any other framework ?

Please update

Thanks.

Update x-splade-input when other form is changed

can we do onchange event in input? to update others input value?

Fail to catch error from eloquent

Error on handle eloquent

found error when no data in database

tried using eloquent and DB Query
with findOrFail and where('id', $id)
error when using postgress with schema

[Question] Table component features...

Love Splade,it works like a charm.But is there any future plans on adding a checkboxes (select all) and bulk actions in table component?Feels like it's missing.

And what about add third click for table sorting which will reset the sort to default ,because if you want do it with 'Reset' button it resets all filters including selectFilter's and you cant go back to default sorting without resetting all filters,especially if you are sorting by a table that is hidden from the user (by date added for example).

Improve meta tags, social media images, etc. of the website and docs

Impossible to install with Laravel/framework v9.36.2

Hello,

I was trying to install splade to test it to my laravel/vuejs project but I encounter a problem with the composer require command.
I got this message :

Your requirements could not be resolved to an installable set of packages.

  Problem 1
    - laravel/framework is locked to version v9.36.2 and an update of this package was not requested.
    - protonemedia/laravel-splade 0.6.5 conflicts with laravel/framework 9.36.0|9.36.1|9.36.2.
    - Root composer.json requires protonemedia/laravel-splade ^0.6.5 -> satisfiable by protonemedia/laravel-splade[0.6.5].

It appears that splade is in conflict with my version of laravel (and version 9.36.1 + 9.63.0).
Can it be fix from my side ?

Thanks you for you work 👍

Form submit-on-change doesn't work with input dates

Hey,

<x-splade-form submit-on-change action="xxxx">
<x-splade-input name="dates" date range/>
</x-splade-form>

Doesn't seem to auto-submit when a date-range has been selected.

Tested in 0.6.2, not sure if it has been fixed in 0.6.5

Fill checkboxes from default-values

Hi,

I'm testing out Splade, and it seems the checkboxes doesn't auto-check based on the :default provided to the form.

Nor can I programatically select it with a checked prop.

What am I doing wrong?

<x-splade-form :action="route('house.update', $house)" :default="$house" class="space-y-4">
    <x-splade-group>
        <x-splade-checkbox name="pool" label="Pool" />
        <x-splade-checkbox name="fenced_in" label="Fenced in" />
        <x-splade-checkbox name="pets_allowed" label="Pets allowed" />
    </x-splade-group>
</x-splade-form>

I've dd'ed out $house to ensure that pool, fenced_in and pets_allowed are in the model, and equal to 1, however the checkboxes still seem to be unchecked.

How to enable SSR for components defined in resources/js folder

i followed the following steps but no luck.

custom component resource/js/Custom.vue

<template
     <h1> this is cusotme component </h1>
</template>

import in app.js

import Custom from  './Custom.vue')
const app = createApp({
                render: renderSpladeApp({ el })
            })
            .use(SpladePlugin, {
                "max_keep_alive": 10,
                "transform_anchors": false,
            })

app.component('Custom', Custom)

app.mount('#app')

usage in blade file

 <div>
      <Custom />
</div>

Custom component gets rendered but not ssred

Prerender content when initially requesting a page

As the rendering process on the server side happens with Blade it would be really nice to already have the content shown when the page is loaded. This would have the benefit that no SSR process on the server side would be needed.

What do you think about it?

render data from database

How to Render list of data objects from database to view. thanks

form.processing never shows

I am using x-splade-form component.

When I submit the form, form.processing is never true I guess. The text inside the p tag with the v-if="form.processing" check is never rendered.

Here is the code I used:

When clicked on submit it only shows this but not the pending state:

I even tried by making slow 3g on the network tab on chrome.

Field Repeater, for invoice generation

https://filamentphp.com/docs/2.x/forms/fields#repeater

By using Spade Form, can something like this be achieved in Splade?
Dynamically add or remove fields, means some time hasMany relation need to for CRUD purpose.

Show loader instead of pre-rendered content

It would be nice if there was some kind of loading spinner/screen that fades away when the Vue app is mounted.

This might be a Vite ‘issue’, as it happens with a vanilla Jetstream installation as well. Let’s see if we can fix the flickering before the app is mounted.