Vue

Overview of Custom Starter Kits While Laravel provides polished official starter kits for Livewire, Vue, and React, the framework's beauty lies in its flexibility. Developers often have unique requirements—perhaps a Svelte frontend or a pre-configured SaaS boilerplate. The Laravel Installer now bridges this gap by supporting community-created starter kits. This allows you to bootstrap entire applications from any GitHub repository, ensuring your preferred architecture is ready to go in seconds. Prerequisites To follow this guide, you should have a solid grasp of PHP and the Laravel framework. You must have the Laravel Installer (version 5.0 or higher) installed globally. Familiarity with Composer and the command line is essential for managing dependencies and project initialization. Key Libraries & Tools * **Laravel Installer**: The command-line utility used to create new projects. * **Laravel Herd**: A fast, lightweight development environment for macOS and Windows. * **Wave**: A popular community starter kit by DevDojo specifically for SaaS development. Code Walkthrough: Using the New Parameter The core of this update is the `--using` parameter. Instead of relying on the interactive prompt to select official kits, you point the installer directly to a GitHub repository. ```bash laravel new my-awesome-project --using="devdojo/wave" ``` The installer performs several tasks behind the scenes. First, it clones the repository specified in the `vendor/repo` format. Once the files are local, it handles the standard Laravel setup. Finally, it prompts you to run asset compilation: ```bash The installer will ask: "Would you like to run npm install and npm build?" ``` By selecting yes, the installer finishes the frontend scaffolding, leaving you with a fully functional, customized application environment. Syntax Notes The `--using` flag follows a specific convention: `organization/repository`. This mirrors how you require packages in Composer. Unlike official kits, community kits skip many interactive prompts (like database or testing suite selection) because the starter kit author typically hardcodes these choices into the repository structure. Practical Examples and One-Click Installs A powerful new feature is the integration with Laravel Herd. On repository pages like Wave, you may now see an "Install with Herd" link. Clicking this triggers a browser protocol that opens Laravel Herd directly, allowing you to name the project and set its local path through a GUI rather than the terminal. This creates a seamless bridge between finding a tool on GitHub and running it on your local machine. Tips & Gotchas Always verify the source of a community kit before running it. Since the installer clones and executes code from these repositories, ensure you trust the maintainer. If your custom kit requires specific environment variables, remember to check the `.env.example` file immediately after installation, as the generic Laravel setup might not cover every custom configuration option.

Overview Modern web development demands speed without sacrificing architectural integrity. The new Laravel Vue starter kit solves this by providing a pre-configured foundation that includes authentication, profile management, and aesthetic UI layouts. This kit bridges the gap between backend logic and frontend reactivity, allowing you to bypass the repetitive "boilerplate" phase of a new project. Prerequisites To get the most out of this tutorial, you should have a baseline understanding of PHP and JavaScript. Familiarity with the Laravel directory structure and the Vue Composition API is essential, as the kit relies heavily on modern script setup patterns and reactive data binding. Key Libraries & Tools This stack integrates several high-performance tools: - **Laravel**: The robust backend PHP framework. - **Vue**: The frontend framework used for building interactive interfaces. - **Inertia JS**: The "glue" adapter that connects Laravel's server-side routing with Vue's client-side components. - **Shadcn UI (Vue Port)**: A collection of accessible, re-usable UI components built with Tailwind CSS. Code Walkthrough Setting up a new project starts with a single command to generate the application scaffolding. Once initialized, you can manage the layout logic within your Vue components. Layout Switching The kit supports multiple layout configurations out of the box. You can toggle between a sidebar-heavy dashboard or a top-navigation header by adjusting the application layout component. ```javascript // Switching from Sidebar to Header layout import AppHeaderLayout from '@/Layouts/AppHeaderLayout.vue'; // Use this in your page component <AppHeaderLayout> <slot /> </AppHeaderLayout> ``` Integrating Shadcn Components Because the kit uses the Shadcn UI port, adding new elements like a switch or a button is a matter of installing the component and importing it directly into your dashboard. ```javascript // Import a newly installed Shadcn component import { Switch } from '@/Components/ui/switch'; // Implementation in template <Switch :checked="isDark" @update:checked="toggleMode" /> ``` Syntax Notes The kit utilizes Inertia JS to pass data from Laravel controllers directly into Vue props. This eliminates the need for a separate REST or GraphQL API, as the server-side routing handles the state injection. Pay attention to the `useForm` helper from Inertia, which simplifies form submission and validation error handling. Tips & Gotchas Always ensure your development server is running `npm run dev` to compile the Vue assets and Tailwind styles in real-time. If you enable the `mustVerifyEmail` feature in your model, the starter kit automatically blocks access to the dashboard until the user confirms their link, ensuring security remains a default setting rather than an afterthought.

Overview Livewire revolutionized the Laravel ecosystem by allowing developers to build dynamic, reactive interfaces without ever leaving the comfort of PHP. However, the broader JavaScript world possesses a massive head start in terms of component libraries and complex client-side utilities. If you need a sophisticated graphing library like Tremor or advanced physics-based animations from Motion, you often face a difficult choice: stick with Livewire and build from scratch, or migrate the entire project to Inertia.js. MingleJS provides a middle ground. It functions as a bridge that lets you embed React or Vue components directly inside your Livewire architecture. This approach means you can keep 95% of your application in standard Blade and Livewire while using "Islands" of JavaScript frameworks for the specific pieces that require them. This hybrid model preserves developer productivity while ensuring you never hit a ceiling when client-side complexity increases. Prerequisites To get the most out of this workflow, you should be comfortable with the following: * **Laravel 10+**: Basic routing, controllers, and Vite configuration. * **Livewire 3**: Understanding component lifecycles, properties, and event dispatching. * **React or Vue**: Familiarity with JSX/SFC syntax and the concept of props. * **Node.js & NPM**: Experience installing packages and running build scripts. Key Libraries & Tools * MingleJS: The primary package providing the `HasMingles` trait and scaffolding commands. * React: A popular UI library for building component-based interfaces. * Vue: A progressive framework used for building user interfaces, also supported by MingleJS. * Motion: A modern animation library (formerly Framer Motion) used for fluid UI transitions. * Vite: The build tool used by Laravel to compile and serve JavaScript assets. Code Walkthrough: Building a Hybrid Component Integrating MingleJS begins with a dedicated artisan command. Unlike standard Livewire components, a "mingled" component consists of both a PHP class and a corresponding JavaScript file. 1. Generating the Component Run the following command to scaffold a React-based mingled component: ```bash php artisan make:mingle ReactMessage ``` This creates two files: `ReactMessage.php` and `ReactMessage.jsx`. The PHP file acts as the Livewire controller, while the `.jsx` file contains your frontend logic. 2. The PHP Logic (Data Provider) In `ReactMessage.php`, you use the `HasMingles` trait. This trait adds a `mingleData()` method where you define the data passed to your JavaScript component. ```python namespace App\Livewire; use UI\Mingle\HasMingles; use Livewire\Component; class ReactMessage extends Component { use HasMingles; public function mingleData() { return [ 'message' => 'Hello from the Server!', 'user_id' => auth()->id(), ]; } public function sendServerAlert($payload) { // Logic to handle data sent back from React logger($payload); } } ``` 3. The React Frontend (Data Consumer) In `ReactMessage.jsx`, MingleJS automatically injects a `wire` object and your `mingleData`. You can interact with the server using `wire.call()`. ```javascript import React from 'react'; export default function ReactMessage({ wire, mingleData }) { const handleClick = () => { // Calling the PHP method directly from React wire.call('sendServerAlert', 'Hello from React!'); }; return ( <div className="p-4 bg-white shadow"> <h1>{mingleData.message}</h1> <button onClick={handleClick} className="btn-primary"> Talk to Livewire </button> </div> ); } ``` 4. Handling Events Across Boundaries MingleJS supports Livewire's event system. If a standard Livewire component on the page dispatches an event, your React component can listen for it using `wire.on()`. ```javascript // Inside your React component useEffect or setup wire.on('item-added', (data) => { console.log('React heard an event from PHP:', data); }); ``` Syntax Notes * **The Wire Prop**: This is the most critical piece of the MingleJS bridge. It mimics the behavior of Livewire's `wire:click` or `wire:model` but within a JavaScript framework context. * **Lazy Loading**: You can mark components as lazy by using the `#[Lazy]` attribute in your PHP class. MingleJS will then handle the deferred loading of the JavaScript assets until the component is visible in the viewport. * **MingleData Serialization**: All data returned in `mingleData()` must be JSON-serializable. Avoid passing complex PHP objects; instead, pass arrays or simple primitives. Practical Examples Advanced Dashboard Charts While Livewire can render basic charts via SVG, a library like Tremor (built for React) offers much deeper interactivity. You can fetch your analytics in PHP, pass the raw data through `mingleData`, and let React handle the complex rendering and tooltips. Rich Text Editors Integrating heavy JavaScript editors like Tiptap or Quill into Livewire often results in "DOM clobbering" issues when Livewire updates the page. By containerizing the editor in a MingleJS React component, you isolate the editor's DOM state from Livewire's diffing engine, preventing the cursor from jumping or the editor from resetting. Migration Bridge If you are gradually moving a legacy Vue SPA into a newer Laravel project, you don't have to rewrite every component as a Livewire class immediately. You can wrap existing Vue components in MingleJS, allowing them to function within your new Blade layouts while they wait for their eventual refactor. Tips & Gotchas * **Avoid Over-Mingling**: Use MingleJS sparingly. If a component can be built with Alpine.js and standard Livewire, that will always be more performant than loading the entire React runtime. * **Asset Sizes**: Every framework you add (React, Vue, etc.) increases your JavaScript bundle. If you use MingleJS for React on one page and Vue on another, your users are downloading both runtimes. Stick to one JavaScript framework if possible. * **State Persistence**: Remember that when Livewire refreshes the parent component, the MingleJS component might re-mount. Ensure you are either syncing state back to the server using `wire.call` or utilizing Livewire's `wire:ignore` to prevent unwanted re-renders. * **Vite Configuration**: Ensure your `vite.config.js` is properly set up to handle the specific framework you are using. If you are using React, you need the `@vitejs/plugin-react` plugin active.

Overview Inertia.js 2.0 represents a significant evolution in the "classic monolith" approach to building single-page applications. By acting as the glue between Laravel and modern frontend frameworks like React, Vue, and Svelte, it allows developers to build rich, interactive interfaces without the overhead of maintaining a separate REST or GraphQL API. This update focuses on performance, perceived speed, and reduced boilerplate for common tasks like data fetching. Prerequisites To follow this guide, you should have a solid grasp of Laravel routing and controllers. You should also be comfortable with at least one frontend framework and understand how props are passed from the server to the client. Familiarity with the basic Inertia request lifecycle is recommended. Key Libraries & Tools * **InertiaJS Core**: The primary bridge for managing state between PHP and JavaScript. * **Svelte/Vue/React Adapter**: Framework-specific libraries that provide hooks and components like `usePoll` and `WhenVisible`. * **Laravel**: The backend engine responsible for data fetching and routing. Code Walkthrough: Deferred Props One of the most powerful performance features is the ability to defer heavy props. Instead of forcing the user to wait for a slow database query to finish before the initial page render, you can load the shell of the page immediately. ```php // In your Laravel Controller return inertia('Dashboard', [ 'user' => $request->user(), 'stats' => inertia()->defer(fn () => Stats::get()) ]); ``` By wrapping the `stats` prop in the `inertia()->defer` function, Inertia skips this data during the initial request. On the client side, you can handle the loading state gracefully: ```svelte <script> export let stats; </script> {#if stats} <StatsTable data={stats} /> {:else} <LoadingSpinner /> {/if} ``` Syntax Notes: Intelligent Polling and Prefetching Inertia 2.0 introduces the `usePoll` helper, which simplifies refreshing data. Instead of manual `setInterval` logic, you can define a polling interval directly in your component. Additionally, the `prefetch` attribute on links allows you to anticipate user navigation. By adding `prefetch` to a `<Link>`, Inertia fetches the page data and caches it for a set duration, making the transition feel instantaneous when the user finally clicks. Practical Examples: Lazy Loading with Visibility The `WhenVisible` component is a game-changer for long-scrolling dashboards. Instead of loading every data point on page load, you can wrap expensive components so they only trigger a server request when they enter the viewport. ```svelte <WhenVisible data="extraDetails" buffer={300}> <ExpensiveComponent data={extraDetails} /> <div slot="fallback">Loading more...</div> </WhenVisible> ``` Tips & Gotchas * **Grouping Defers**: You can group deferred props by passing a string as a second argument to `defer()`. This ensures related data loads together rather than triggering multiple sequential flashes. * **Cache Management**: When using link prefetching, be mindful of data staleness. Use the caching options to ensure users aren't seeing hours-old data just because it was prefetched earlier.

Overview of Modern Laravel Data Strategies Efficiently moving data from a database to a user's browser involves more than simple SQL queries. It requires a cohesive strategy that maintains data integrity, ensures developer productivity, and optimizes performance. This tutorial explores two pillars of the Laravel ecosystem: TypeScript integration via Spatie packages and the advanced application of the Eloquent ORM. By synchronizing server-side PHP types with client-side TypeScript definitions, developers can eliminate a massive category of "undefined" errors. Simultaneously, mastering Eloquent ORM allows for the creation of readable, performant code that scales from simple MVPs to large-scale data systems. Prerequisites for Full-Stack Integration To get the most out of this guide, you should have a solid foundation in the following areas: * **PHP & Laravel Fundamentals:** Familiarity with Laravel's routing, controllers, and Eloquent ORM models. * **JavaScript/TypeScript:** Basic understanding of TypeScript interfaces and how Inertia.js bridges the gap between the two languages. * **Composer & NPM:** Proficiency in managing packages on both the backend and frontend. * **Relational Databases:** Conceptual knowledge of table relationships (one-to-many, many-to-many). Key Libraries & Tools We will utilize several industry-standard tools and libraries specifically designed to enhance the Laravel experience: * Laravel Data **(Spatie):** A powerful package that replaces traditional Laravel Resources and Form Requests with rich Data Transfer Objects (DTOs). * **TypeScript Transformer (Spatie):** A tool that scans your PHP classes and automatically generates matching TypeScript definitions. * Inertia.js**:** The "modern monolith" framework that allows you to build single-page apps using classic server-side routing. * **Laravel IDE Helper:** A must-have for local development to ensure your editor understands Eloquent ORM's magic methods. * **Sentry:** While used for error tracking, it's often a hallmark of professional-grade Laravel deployments. Code Walkthrough: Implementing Consistent Types Step 1: Defining the Data Object Instead of returning a model directly, we create a Laravel Data object. This acts as our single source of truth. We use the `#[TypeScript]` attribute to signal that this class should be transformed. ```python namespace App\Data; use Spatie\LaravelData\Data; use Spatie\TypeScriptTransformer\Attributes\TypeScript; #[TypeScript] class UserData extends Data { public function __construct( public int $id, public string $first_name, public string $last_name, public string $email, public ?string $avatar, ) {} public static function fromModel(User $user): self { return new self( id: $user->id, first_name: $user->first_name, last_name: $user->last_name, email: $user->email, avatar: $user->avatar_url, // Custom attribute ); } } ``` In this block, we define exactly what the frontend receives. By using `fromModel`, we can transform database-specific names into a cleaner API for our React or Vue components. Step 2: Automating Type Generation Once the PHP classes are ready, we run the transformation command. This creates a `.d.ts` file in our resources directory. ```bash php artisan typescript:transform ``` This command looks for the `#[TypeScript]` attribute and converts the PHP types (string, int, bool, nullable) into their TypeScript equivalents. This ensures that if you change a field name in PHP, your frontend will immediately show a red squiggly line until it's fixed. Step 3: Consuming Types in the Frontend In our Inertia.js components, we can now import these generated types. This gives us full autocomplete support when accessing properties like `user.first_name`. ```typescript import { UserData } from '@/types/generated'; interface Props { user: UserData; } default function Dashboard({ user }: Props) { return ( <div>Welcome, {user.first_name}</div> ); } ``` Deep Dive into Eloquent ORM Optimization Drishti Jain emphasizes that Eloquent ORM is a sophisticated engine that requires careful handling to maintain speed. Understanding the difference between how data is retrieved and how it's modified is crucial for scaling. Efficient Querying with Scopes Instead of cluttering your controllers with repetitive `where` clauses, use Query Scopes to encapsulate business logic. This makes your code more readable and easier to test. ```python // Inside your Model public function scopeActive($query) { return $query->where('status', 'active')->where('verified_at', '!=', null); } // Inside your Controller $users = User::active()->get(); ``` The Power of Eager Loading The N+1 query problem is the most common performance killer in Laravel. When you loop through 50 users and access their `posts`, Laravel might execute 51 queries. Use the `with()` method to reduce this to just two queries. ```python // Bad: N+1 problem $users = User::all(); foreach($users as $user) { echo $user->profile->bio; } // Good: Eager Loading $users = User::with('profile')->get(); ``` Drishti Jain notes that while eager loading is vital, you should avoid "unnecessary" eager loading for data that isn't always used, as this bloats memory usage. Syntax Notes & Conventions * **Attributes vs. Annotations:** Modern Laravel uses PHP 8 attributes (like `#[TypeScript]`) which are natively parsed, unlike the older docblock annotations. * **CamelCase vs. Snake_case:** While PHP models typically use snake_case for database columns, many developers use Laravel Data to transform these into camelCase for the JavaScript frontend to follow TypeScript conventions. * **Fluent Interface:** Eloquent ORM uses a fluent interface, allowing you to chain methods like `User::where(...)->active()->latest()->paginate()`. The order often matters for performance, specifically placing filters before sorting. Practical Examples Real-World Case: The Address Form When building an address creation form, you can use Laravel Data to both provide the initial empty state to the frontend and validate the incoming request. This eliminates the need for separate Form Request classes and manual array mapping. 1. **Backend:** The Data object defines the validation rules. 2. **Frontend:** The generated TypeScript interface ensures the form inputs match the expected keys. 3. **Result:** A perfectly typed form where the frontend and backend are never out of sync. Tips & Gotchas * **The Hidden Data Key:** Standard Laravel Resources wrap data in a `data` key. Laravel Data gives you more control over this, allowing you to flatten the response for simpler frontend access. * **CI/CD Integration:** Do not commit generated TypeScript files if you are in a large team. Instead, run the transformation command as part of your build process or use a Vite plugin to watch for changes in real-time. * **Database Transactions:** When testing Eloquent ORM logic, always wrap your tests in transactions. This ensures your test database stays clean without needing to manually delete records after every run. * **Batch Processing:** For datasets with millions of rows, never use `all()`. Use `chunk()` or `lazy()` to process records in small batches to avoid exhausting the server's memory.

Beyond the Entrance: Understanding Authorization Laravel differentiates between authentication and authorization with a simple analogy. Authentication is the ticket that gets you through the concert doors. Authorization determines if you belong in the front row or the VIP lounge. While authentication identifies who a user is, authorization defines exactly what they can do. Laravel provides two primary mechanisms for this: **Gates** and **Policies**. Prerequisites To follow this guide, you should be comfortable with basic PHP syntax and have a Laravel environment set up. Familiarity with MVC patterns and Eloquent models is highly recommended. Key Libraries & Tools - **Laravel Framework**: The core environment for these features. - **Artisan CLI**: The command-line tool used to generate policy boilerplates. - **Blade**: Laravel's templating engine for frontend authorization checks. - **Inertia.js**: Useful for passing authorization props to SPA frameworks like React or Vue. Implementing Gates for One-Off Actions Gates are closures that determine if a user is authorized to perform a specific action. They are typically defined in the `boot` method of your `AppServiceProvider` and are ideal for actions not related to a specific model, such as accessing an admin dashboard. ```python Gate::define('alert-users', function (User $user) { return $user->is_admin; }); ``` You can check these gates in your controllers or views using the `@can` directive: ```html @can('alert-users') <button>Send Alert</button> @endcan ``` Scaling with Model Policies When authorization logic becomes complex or tied to specific resources, Policies are the way to go. They organize logic around a particular Eloquent model. Generate a policy using Artisan: ```bash php artisan make:policy PostPolicy --model=Post ``` This creates a class with methods like `viewAny`, `create`, and `update`. Within a controller, you can enforce these rules using `$this->authorize()` or the `Gate::authorize()` method. Syntax Notes & Best Practices Laravel uses the `can` method across the stack. Whether you are in a Middleware, a Livewire component, or a Blade file, the syntax remains consistent. Always prefer Policies for resource-heavy applications to avoid cluttering your service providers. Use Gates only for global permissions that don't fit a specific model's lifecycle.

Overview: The Evolution of Colocation For years, Laravel developers strictly adhered to the Separation of Concerns. You kept your PHP logic in a Controller or a Livewire class and your markup in a Blade template. While this organized large projects, it often felt like unnecessary friction for smaller components. Livewire Volt changes the game by introducing Single File Components (SFCs) to the PHP ecosystem. It allows you to collocate your server-side logic and your UI in one file, drastically reducing context switching and speeding up development cycles. This mirrors the developer experience found in modern frontend frameworks like Vue, React, or Svelte. Prerequisites To follow this guide, you should have a baseline understanding of Laravel and the PHP language. Familiarity with Blade templates and basic Livewire concepts—like data binding and lifecycle hooks—will help you grasp how Livewire Volt handles state. You should have a local development environment with Composer installed. Key Libraries & Tools - **Livewire**: The core framework providing full-stack reactivity for Laravel. - **Volt**: A Livewire plugin that enables the functional and class-based SFC APIs. - **Artisan**: Laravel's command-line interface used to generate component boilerplate. Code Walkthrough: Functional vs. Class API Livewire Volt offers two distinct flavors. The **Class API** feels like traditional Livewire but lives in one file. The **Functional API** provides a more modern, streamlined syntax. The Functional Approach To create a functional component, use the terminal: `php artisan make:volt playground`. This generates a file where you define state and methods using helper functions. ```php <?php use function Livewire\Volt\{state}; state(['helloWorld' => '']); $newHelloWorld = function () { $this->helloWorld = 'Hi from Livewire Functional API'; }; ?> <div> <button wire:click="newHelloWorld" class="bg-gray-300 p-2"> Run the method </button> <p>{{ $helloWorld }}</p> </div> ``` In this snippet, `state()` initializes your reactive data. The `$newHelloWorld` variable acts as a method callable from the template via `wire:click`. When clicked, Livewire sends a POST request to the server, updates the state, and returns the updated HTML fragment. Syntax Notes: The Dollar Sign Prefix In the functional API, defining a method requires assigning a closure to a variable prefixed with a dollar sign (e.g., `$save`). This tells Livewire Volt to expose that function to the Blade template. Inside these closures, `$this` refers to the underlying Livewire component instance, granting access to state variables. Practical Examples & Use Cases Livewire Volt shines in dashboard widgets, search bars, and complex forms. Instead of jumping between a `SearchComponent.php` and `search.blade.php`, you handle the database query and the results list in a single view. It acts as a "gateway drug" for developers moving from JavaScript frameworks into the Laravel ecosystem because it provides a familiar file structure while maintaining the power of the server. Tips & Gotchas One common mistake is forgetting that even though it looks like JavaScript, this is still executing on the server. Every `wire:click` triggers a network request. Use `wire:model.live` sparingly to avoid overwhelming your server with requests on every keystroke. Always use `PHP artisan make:volt` with the `--class` flag if you prefer the traditional class structure over the functional closure-based syntax.