How do I pass an array from Laravel to JavaScript using spatie blade javascript?

Use the single argument syntax like @javascript(['key' => ['nested' => 'value']]). The package outputs it as a JavaScript object, but ensure the data is JSON-serializable to avoid issues with complex types like closures or resources.

spatie laravel blade javascript vs laracasts/php-vars-to-js-transformer – which should I use?

Spatie's package is more minimal and actively maintained, focusing on Blade integration with automatic registration. Laracasts' package might offer more features like binding to specific events, but spatie's is lighter and simpler for direct variable passing in templates.

Can I use this package with Vue components embedded in Blade templates?

Yes, it's ideal for passing server-side data to Vue components. Inject variables using @javascript and access them in Vue's data or computed properties, but ensure proper scoping to avoid global conflicts, especially with namespacing.

How to add a Content Security Policy nonce to the script tags generated by spatie blade javascript?

Publish the package's view using php artisan vendor:publish --tag=views, then edit the index.blade.php file to include a nonce attribute in the script tag, as detailed in the README. This requires manual setup for each deployment.

Does spatie laravel blade javascript support passing Eloquent models to JavaScript?

It can pass serialized model data, but be cautious with sensitive fields. Convert models to arrays using Laravel's toArray() or similar methods first, as the package handles basic PHP types but doesn't automatically sanitize or format complex objects.

What happens if I use @javascript with duplicate keys in different Blade templates?

Variables may overwrite each other in the global scope, potentially causing bugs. Use the configurable namespace feature to isolate variables or avoid key conflicts by carefully managing data across templates.

Laravel Blade Javascript — PHP to JavaScript Export

What is Laravel Blade Javascript?

Spatie Laravel Blade JavaScript is a Laravel package that adds a Blade directive to export PHP variables to JavaScript. It allows developers to seamlessly pass server-side data to client-side scripts using a simple `@javascript` syntax in Blade templates, eliminating the need for manual script tag creation and JSON encoding.

Target Audience

Laravel developers building applications that require passing server-side data to JavaScript, particularly those using Blade templates and wanting a clean, integrated solution.

Value Proposition

It provides a minimal, elegant syntax for a common task, reducing boilerplate code and potential errors. The package is lightweight, automatically registered, and configurable, making it a convenient alternative to manual implementations or heavier solutions.

A Blade directive to export variables to JavaScript

Use Cases

Best For

Passing Laravel session or config data to JavaScript
Injecting server-side variables into Vue or React components rendered with Blade
Simplifying data sharing between PHP and JavaScript in traditional server-rendered Laravel apps
Avoiding manual JSON encoding and script tag creation for small data transfers
Quickly prototyping features that require PHP data in client-side scripts
Namespacing JavaScript variables to avoid global scope pollution

Not Ideal For

Applications using modern JavaScript frameworks with client-side state management (e.g., Vuex, Redux) that handle data fetching independently
Projects requiring real-time data updates or streaming, as this package only injects data during Blade rendering
Environments with strict Content Security Policies that need automated nonce handling without manual view customization
Large-scale applications where passing complex or large datasets via script tags could impact performance or maintainability

Pros & Cons

Pros

Elegant Syntax

The @javascript directive simplifies variable passing with minimal code, eliminating the need for manual JSON encoding and script tag creation, as shown in the README examples.

Namespace Configuration

Allows variables to be scoped under a custom namespace to avoid global pollution, easily set via a config file, providing flexibility for organized codebases.

Customizable Output

Users can publish and edit the Blade view to modify the script tag, such as adding type attributes or CSP nonces, offering control over security and compliance.

Zero Configuration Setup

Automatically registers upon Composer installation, requiring no additional setup for basic usage, making it quick to integrate into Laravel projects.

Cons

Blade-Only Limitation

Confined to Blade templates, so it cannot be used in other Laravel contexts like APIs or console commands without workarounds, limiting its versatility.

Basic Data Serialization

Handles simple values well but may not efficiently manage complex nested objects or large datasets, as it outputs raw JavaScript assignments without optimization.

Security Overhead

Lacks built-in security features like automatic nonce generation; users must manually publish views to comply with strict CSP policies, adding maintenance burden.

Frequently Asked Questions

What is Laravel Blade Javascript?

Target Audience

Laravel developers building applications that require passing server-side data to JavaScript, particularly those using Blade templates and wanting a clean, integrated solution.

Value Proposition

Use Cases

Best For

Passing Laravel session or config data to JavaScript
Injecting server-side variables into Vue or React components rendered with Blade
Simplifying data sharing between PHP and JavaScript in traditional server-rendered Laravel apps
Avoiding manual JSON encoding and script tag creation for small data transfers
Quickly prototyping features that require PHP data in client-side scripts
Namespacing JavaScript variables to avoid global scope pollution

Not Ideal For

Applications using modern JavaScript frameworks with client-side state management (e.g., Vuex, Redux) that handle data fetching independently
Projects requiring real-time data updates or streaming, as this package only injects data during Blade rendering
Environments with strict Content Security Policies that need automated nonce handling without manual view customization
Large-scale applications where passing complex or large datasets via script tags could impact performance or maintainability

Pros & Cons

Pros

Elegant Syntax

The @javascript directive simplifies variable passing with minimal code, eliminating the need for manual JSON encoding and script tag creation, as shown in the README examples.

Namespace Configuration

Allows variables to be scoped under a custom namespace to avoid global pollution, easily set via a config file, providing flexibility for organized codebases.

Customizable Output

Users can publish and edit the Blade view to modify the script tag, such as adding type attributes or CSP nonces, offering control over security and compliance.

Zero Configuration Setup

Automatically registers upon Composer installation, requiring no additional setup for basic usage, making it quick to integrate into Laravel projects.

Cons

Blade-Only Limitation

Confined to Blade templates, so it cannot be used in other Laravel contexts like APIs or console commands without workarounds, limiting its versatility.

Basic Data Serialization

Handles simple values well but may not efficiently manage complex nested objects or large datasets, as it outputs raw JavaScript assignments without optimization.

Security Overhead

Lacks built-in security features like automatic nonce generation; users must manually publish views to comply with strict CSP policies, adding maintenance burden.

Frequently Asked Questions

Laravel Blade Javascript

What is Laravel Blade Javascript?

Overview

Use Cases

Best For

Not Ideal For

Pros & Cons

Pros

Cons

Frequently Asked Questions

Related Projects

Found a gem we're missing?

Laravel Blade Javascript

What is Laravel Blade Javascript?

Overview

Use Cases

Best For

Not Ideal For

Pros & Cons

Pros

Cons

Frequently Asked Questions

Related Projects

Found a gem we're missing?