Share Laravel Package

Getting Started

Start by publishing the package config and frontend assets, then inspect the share definition API and the Blade component/directive used to render a sheet.

composer require vendor/share-sheet
php artisan vendor:publish --tag=share-sheet-config
php artisan vendor:publish --tag=share-sheet-assets

Look first at:

• config/share-sheet.php for sheet defaults, route/signing options, and asset loading.
• The share builder/facade used to define a share (->title(), ->url(), ->file()).
• The Blade component or directive that renders the sheet and native share buttons.
• The package’s JS entry point if you need to hook into open/close/share events.

First use case: share a server-generated document, such as an invoice PDF, from a Laravel route.

use Vendor\ShareSheet\Facades\Share;

$share = Share::make('invoice-'.$invoice->id)
    ->title('Invoice #'.$invoice->number)
    ->text('Your invoice is ready.')
    ->url(route('invoices.show', $invoice))
    ->file(route('invoices.pdf', $invoice), 'invoice-'.$invoice->number.'.pdf');

<x-share-sheet :share="$share" id="invoice-share">
    <button type="button" data-share-files>
        Share invoice
    </button>

    <a href="#invoice-details" data-share-open="invoice-share#invoice-details">
        Jump to details
    </a>
</x-share-sheet>

As of v1.1.0, data-share-files buttons share the files attached with ->file() and are rendered only where the device supports native file sharing. The sheet also automatically adds a “Share the file” action when the share has files.

Implementation Patterns

Define shares close to the resource, render them in the view. Build the share in a controller, form request, or dedicated presenter rather than in Blade. This keeps file URLs, signed routes, and authorization logic testable.

public function show(Invoice $invoice)
{
    $share = Share::make('invoice-'.$invoice->id)
        ->title('Invoice #'.$invoice->number)
        ->url(route('invoices.show', $invoice))
        ->file(route('invoices.pdf', $invoice), 'invoice.pdf');

    return view('invoices.show', compact('invoice', 'share'));
}

Use ->file() for generated or protected assets. Point file URLs at signed, temporary, or otherwise authorized routes. Do not expose private storage paths directly. If the package supports multiple calls, attach several files only when the target platforms and your fallback UI can handle them.

Treat native file sharing as progressive enhancement. Add data-share-files to a normal button inside the sheet. The package hides it when native file sharing is unavailable, so always provide a visible fallback: a download link, an email action, or the sheet’s built-in “Share the file” button. Do not make the native button the only way to access the file.

Use data-share-open for deep links into long sheets. When a sheet contains multiple sections, give each section a stable id and link to it with data-share-open="sheet-id#section-id". This is useful for emails, notifications, and support flows that should open the sheet at “Shipping”, “Payment”, or “Details” rather than at the top.

<section id="payment">
    ...
</section>

<a href="{{ route('orders.show', $order) }}#payment"
   data-share-open="order-share#payment">
    Open payment options
</a>

Integrate with Livewire/Alpine carefully. If the sheet is rendered inside a Livewire component, reinitialize or re-render the package’s JS after DOM updates. Prefer stable wire keys and avoid morphing the sheet container while it is open. If you need custom behavior, listen for the package’s open/share events rather than binding directly to internal selectors.

Keep file generation off the initial page render. Generating PDFs or large exports synchronously in the controller can slow down the page. Use an on-demand route, a queued export, or a temporary signed URL so ->file() only points to the asset.

Test the share contract, not just the markup. Assert that the share contains the expected file URL and filename, that sections render with the expected IDs, and that authorization prevents users from generating another user’s file.

Gotchas and Tips

• Native file sharing is not universal. The Web Share API’s file support depends on secure context (HTTPS), browser, OS, and file type. Desktop support is especially inconsistent. Rely on the package hiding data-share-files where unsupported, but keep a fallback action visible.
• File URLs must be reachable by the browser. If ->file() points to a signed route, ensure the URL is valid for the user’s session and does not expire before the share completes. Avoid URLs that require an authenticated XHR fetch the browser cannot perform during sharing.
• Mind file size and MIME type limits. Platform share targets impose their own limits. Validate file size/type server-side and surface a clear fallback download link when native sharing fails.
• Section anchors need real, unique IDs. data-share-open="sheet-id#section-id" only works if the sheet ID and section ID match exactly. Avoid dynamic IDs with spaces or special characters; URL-encode values if they are generated.
• Lazy-loaded sheet content can break anchor scrolling. If sections are loaded after the sheet opens, the target may not exist when the scroll runs. Render section content eagerly or trigger scrolling after the content is mounted.
• data-share-files needs a share context. A button with this attribute outside the relevant sheet/share scope will do nothing useful. Keep it inside the sheet component or the element that receives the share definition.
• Re-publish assets after upgrading. v1.1.0 adds new frontend behavior for file sharing and section targeting. Run the package’s asset publish/install command and clear cached views/config as part of deployment.
• Accessibility still matters. Give native share buttons explicit labels, ensure the sheet traps focus and restores it on close, and avoid removing the fallback download action just because data-share-files renders on some devices.
• Debug native availability in the browser, not only in tests. Feature detection is client-side. Use the browser console and the package’s events to confirm whether the button is hidden due to missing navigator.canShare/navigator.share support.
• Extension point: if the built-in sheet action does not fit your UX, use data-share-files on your own button and listen for the package’s share lifecycle events to add analytics or custom fallback handling.