Laravel Zap isn't just another library; it's a comprehensive schedule management system that deeply integrates with Laravel's ecosystem, making scheduling feel like a native, effortless part of your development workflow.

What is Laravel Zap?

At its core, Laravel Zap provides a fluent and intuitive API for creating, managing, and querying schedules. Whether you're building a doctor's appointment booking system, a meeting room management solution, or an employee shift scheduler, Zap offers the tools you need to handle intricate temporal logic with ease.

Key Features that Make Laravel Zap Stand Out:

• Eloquent Integration: Zap seamlessly integrates with Laravel's Eloquent ORM. By simply adding the HasSchedules trait to any of your models (e.g., User, Doctor, Room), you can instantly equip them with schedule management capabilities, complete with full relationship support.

  Example: Adding the HasSchedules trait to a Doctor model

    <?php
  
    namespace App\Models;
  
    use Illuminate\Database\Eloquent\Model;
    use Zap\Traits\HasSchedules; // Assuming Zap is in the Zap namespace
  
    class Doctor extends Model
    {
        use HasSchedules;
  
        protected $fillable = ['name', 'specialty'];
  
        // ... other model properties and methods
    }
  

• Smart Conflict Detection: Say goodbye to double-bookings and overlapping schedules. Zap boasts an intelligent conflict detection system that automatically prevents such occurrences. You can even customize buffer times and enable strict mode validation for precise control.

  Example: Checking for conflicts before creating a new appointment

    <?php
  
    use Carbon\Carbon;
  
    $doctor = Doctor::find(1);
    $startTime = Carbon::parse('2025-07-01 09:00:00');
    $endTime = Carbon::parse('2025-07-01 09:30:00');
  
    if ($doctor->schedules()->isConflicting($startTime, $endTime)) {
        echo "Doctor is not available at this time. Conflict detected!";
    } else {
        $doctor->schedules()->create([
            'start_time' => $startTime,
            'end_time' => $endTime,
            'type' => 'appointment', // Custom schedule type
            'notes' => 'Patient John Doe'
        ]);
        echo "Appointment successfully booked!";
    }
  

  Flexible Recurring Patterns: From daily stand-ups to monthly maintenance windows, Zap handles recurring schedules with remarkable flexibility. Define daily, weekly, monthly, or even custom patterns to accommodate any business-specific scheduling scenario.

  Example: Creating a weekly recurring meeting

    <?php
  
    use Carbon\Carbon;
  
    $room = Room::find(5);
    $room->schedules()->create([
        'start_time' => Carbon::parse('2025-07-02 10:00:00'), // First occurrence
        'end_time' => Carbon::parse('2025-07-02 11:00:00'),
        'type' => 'team_meeting',
        'recurrence' => 'weekly', // 'daily', 'monthly', 'yearly', or custom cron string
        'ends_on' => Carbon::parse('2025-12-31 23:59:59'), // Optional end date
        'notes' => 'Weekly sync-up'
    ]);
  

• Carbon-Powered Temporal Operations: Built on top of Laravel's robust Carbon library, Zap provides comprehensive date and time manipulation, including full timezone support. This is crucial for applications serving a global user base.

  Example: Fetching schedules in a specific timezone

    <?php
  
    use Carbon\Carbon;
  
    $user = User::find(10);
    $userSchedules = $user->schedules()
                          ->forDate(Carbon::today('America/New_York'))
                          ->get();
  
    foreach ($userSchedules as $schedule) {
        echo "Schedule from " . $schedule->start_time->setTimezone('Europe/London')->format('Y-m-d H:i:s') . "\n";
    }
  

• Availability Management: One of Zap's most powerful features is its availability system. Easily check if a resource is available at a specific time or retrieve all available time slots for a given day, making appointment booking a breeze.

  Example: Getting available slots for a doctor

    <?php
  
    use Carbon\Carbon;
  
    $doctor = Doctor::find(1);
    $date = Carbon::parse('2025-07-05');
    $slotDuration = 30; // minutes
  
    $availableSlots = $doctor->schedules()->getAvailableSlots($date, $slotDuration, [
        'start_of_day' => '09:00', // Doctor's working hours
        'end_of_day' => '17:00',
        'break_times' => [
            ['start' => '13:00', 'end' => '14:00'] // Lunch break
        ]
    ]);
  
    echo "Available slots for Doctor on " . $date->toDateString() . ":\n";
    foreach ($availableSlots as $slot) {
        echo $slot['start']->format('H:i') . " - " . $slot['end']->format('H:i') . "\n";
    }
  

• Performance Optimization: Zap is engineered for performance. It includes caching support for frequently accessed schedule data, eager loading capabilities to prevent N+1 queries, and recommendations for database indexing to ensure optimal speed.

  Example: Eager loading schedules with a model

    <?php
  
    $doctors = Doctor::with('schedules')->get();
  
    foreach ($doctors as $doctor) {
        echo $doctor->name . " has " . $doctor->schedules->count() . " schedules.\n";
    }
  

• Developer Experience (DX): With a fluent API, clear documentation, and comprehensive testing, Laravel Zap prioritizes the developer experience, making it a joy to work with.

Use Cases for Laravel Zap

The versatility of Laravel Zap makes it suitable for a wide array of applications:

• Appointment Booking Systems: For clinics, salons, consultants, or any service provider requiring client appointments.

• Meeting Room Management: Efficiently manage shared resources like meeting rooms, ensuring no conflicts.

• Employee Shift Management: Create and manage complex employee work schedules, including recurring shifts and overtime.

• Event Management Platforms: Organize and track events, workshops, or classes with specific start and end times.

• Resource Allocation: Manage the availability of equipment, vehicles, or any other bookable resource.

Why Choose Laravel Zap?

Choosing Laravel Zap means choosing:

• Laravel-Native Solution: It feels like a natural extension of your Laravel application.

• Enhanced Developer Productivity: Its intuitive API and powerful features save significant development time.

• Reliability and Accuracy: Robust conflict detection ensures accurate and reliable scheduling.

• Scalability: Designed to handle both small-scale appointment systems and complex enterprise-level scheduling platforms.

• Active Community and Maintenance: Benefit from ongoing development and community support.

Laravel Zap is an open-source package licensed under the MIT License, ready to empower your next Laravel project.

Vue 3 offers an elegant solution: the provide and inject API. While seemingly simple, mastering its nuances, especially around reactivity and edge cases, is crucial for building robust and scalable applications. Let's explore!

What are provide and inject?

At their core, provide and inject allow an ancestor component (a "provider") to make data available to any of its descendant components (an "injector"), regardless of how deeply nested they are. Think of it as a localized "dependency injection" system for your component tree.

This differs from props, which only allow data flow from parent to direct child. With provide and inject, intermediate components don't need to know about the data being passed, leading to cleaner code.

Basic Usage

1. Providing Data (Ancestor Component)

In a parent component, you use the provide function. It takes two arguments:

• A key: A unique identifier (preferably a Symbol for type safety and to avoid collision).

• A value: The data you want to make available.

<script setup>
import { provide, ref } from 'vue';

// Define a Symbol for the key to prevent naming conflicts
const AppConfigKey = Symbol('appConfig'); 

const appSettings = ref({
  theme: 'dark',
  language: 'en'
});

provide(AppConfigKey, appSettings); 
</script>

<template>
  <div>
    <h1>Application Settings</h1>
    <DeeplyNestedComponent />
  </div>
</template>

Here, appSettings (a reactive ref) is provided under the AppConfigKey.

2. Injecting Data (Descendant Component)

In any descendant component, you use the inject function with the same key to retrieve the provided value.

<script setup>
import { inject } from 'vue';

const AppConfigKey = Symbol('appConfig'); // Must be the same Symbol as provided

// Inject the provided value. The second argument is an optional default.
const config = inject(AppConfigKey, { theme: 'light', language: 'es' }); 

// `config` is a Ref, so access its value with .value
console.log('Current theme:', config.value.theme); 
</script>

<template>
  <p>The current theme is: {{ config.theme }}</p>
</template>

If AppConfigKey wasn't provided by an ancestor, config would default to { theme: 'light', language: 'es' }.

Reactivity in provide and inject

This is where it gets powerful! When you provide a reactive value (like a ref or reactive object), the injected value in descendant components will also be reactive. This means any changes to the original provided value will automatically propagate down the component tree.

<script setup>
import { provide, ref } from 'vue';
const SharedCounterKey = Symbol('sharedCounter');
const counter = ref(0); // Reactive ref

provide(SharedCounterKey, counter);

// Function to increment the counter
const increment = () => {
  counter.value++;
};
</script>

<template>
  <div>
    <p>Parent Counter: {{ counter }}</p>
    <button @click="increment">Increment from Parent</button>
    <ChildComponent />
  </div>
</template>

<script setup>
import { inject } from 'vue';
const SharedCounterKey = Symbol('sharedCounter');
const counter = inject(SharedCounterKey); // Injected as a reactive ref

// A computed property reacting to the injected ref
import { computed } from 'vue';
const doubleCounter = computed(() => counter.value * 2);

// Function to decrement the counter (mutates the provided ref)
const decrement = () => {
  counter.value--;
};
</script>

<template>
  <div>
    <p>Child Counter: {{ counter }}</p>
    <p>Double Counter: {{ doubleCounter }}</p>
    <button @click="decrement">Decrement from Child</button>
  </div>
</template>

In this example, changing counter in ParentComponent or ChildComponent will update both.

Important: If you provide a plain (non-reactive) value, it will not be reactive in the injecting components. Changes to the original value won't trigger updates.

Edge Cases and Best Practices

1. Modifying Provided State

While you can mutate an injected ref (as shown with decrement above), it's generally a best practice to keep state mutations co-located with the provider. This makes your data flow easier to trace and debug.

Instead of directly modifying counter.value in the child, the parent could provide a mutation function:

<script setup>
import { provide, ref } from 'vue';
const SharedCounterKey = Symbol('sharedCounter');
const counter = ref(0);

// Provide both the reactive state and a function to modify it
provide(SharedCounterKey, {
  count: counter,
  increment: () => counter.value++,
  decrement: () => counter.value--
});
</script>
<script setup>
import { inject } from 'vue';
const SharedCounterKey = Symbol('sharedCounter');
const { count, increment, decrement } = inject(SharedCounterKey); 
</script>

<template>
  <div>
    <p>Child Counter: {{ count }}</p>
    <button @click="increment">Increment from Child</button>
    <button @click="decrement">Decrement from Child</button>
  </div>
</template>

This pattern is cleaner as the parent remains the sole owner of the counter's modification logic.

2. Collisions with String Keys

Using simple strings as keys (e.g., provide('myKey', value)) can lead to unexpected behavior if multiple ancestor components accidentally use the same string key. The inject call will always resolve to the value provided by the closest ancestor in the component chain.

Solution: Use Symbols for injection keys. Create a separate file (e.g., src/keys.js) to export unique symbols:

// src/keys.js
export const AppConfigKey = Symbol('appConfig');
export const ThemeKey = Symbol('theme');
export const LoggerKey = Symbol('loggerService');

Then, import and use them:

// ProviderComponent.vue
<script setup>
import { provide, ref } from 'vue';
import { ThemeKey } from '@/keys';

const theme = ref('dark');
provide(ThemeKey, theme);
</script>

// ConsumerComponent.vue
<script setup>
import { inject } from 'vue';
import { ThemeKey } from '@/keys';

const theme = inject(ThemeKey);
</script>

This guarantees uniqueness and better type inference with TypeScript.

3. Default Values with inject

The inject function can take a second argument: a default value. This is highly recommended for robustness, as it prevents errors if a component tries to inject something that hasn't been provided by an ancestor.

<script setup>
import { inject } from 'vue';
import { AppConfigKey } from '@/keys';

// If AppConfigKey is not provided, this will use the default object
const config = inject(AppConfigKey, {
  theme: 'default-theme',
  language: 'en-US'
});
</script>

For expensive default values (e.g., creating a large object or calling an API), you can provide a factory function as the default, coupled with true as the third argument. This ensures the default value is only created if truly needed.

<script setup>
import { inject } from 'vue';
import { AppConfigKey } from '@/keys';

const config = inject(AppConfigKey, () => ({
  theme: 'fallback-theme',
  language: 'default'
}), true); // `true` indicates the second argument is a factory
</script>

4. When to Use provide/inject vs. Other Solutions

• Props: Use for direct parent-to-child communication where data flows one level down. Prefer props when possible due to explicit data flow.

• Emits: Use for child-to-parent communication (child "emits" an event, parent "listens").

• Vuex/Pinia (State Management Libraries): Use for truly global application state that needs to be accessed and modified from anywhere in your app, often with complex state logic, mutations, and actions. provide/inject is for component subtree context.

• Composables: For reusable, encapsulated logic. A composable can leverage provide/inject internally, but they solve different problems.

provide/inject shines for:

• Theming or Configuration: Passing down global style settings or feature flags.

• Service Injection: Providing instances of helper classes (e.g., an analytics service, a logger).

• Component Library Context: When building UI components that need to implicitly share state (e.g., a Tabs component providing active tab state to TabPanel children).

Conclusion

provide and inject are powerful tools in Vue 3 that help you manage data flow in complex component hierarchies, effectively solving "prop drilling." By understanding their reactivity behavior, using Symbols for keys, and providing sensible defaults, you can leverage them to build cleaner, more maintainable, and scalable Vue applications. Embrace them where appropriate, and keep your component communication clear!

1. Streamlined Querying with reorderDesc()

Querying databases is a daily ritual for Laravel developers, and the framework consistently seeks ways to make it more intuitive. Laravel 12.17.0 introduces the reorderDesc() method to the Query Builder, offering a more concise syntax for reordering query results in descending order.

The Problem It Solves:

Previously, if you needed to reorder a query (overriding any existing orderBy clauses) specifically in descending order, you'd typically use reorder($column, 'desc'). While functional, the explicit 'desc' string could be slightly verbose, especially in complex or conditionally ordered queries.

The reorderDesc() Solution:

The new method simplifies this by providing a dedicated helper for descending reordering.

Before (Laravel < 12.17.0):

use App\Models\Product;

// Fetch products, initially ordered by 'name', but then reorder by 'price' in descending order.
$expensiveProducts = Product::orderBy('name')
    ->reorder('price', 'desc')
    ->get();

// Or, a more complex scenario: Reordering posts by a subquery's result in descending order.
$posts = Post::orderBy('title')
    ->when(
        Auth::check(),
        fn($query) =>
        $query->reorder(
            Comment::select('created_at')
                ->whereColumn('post_id', 'posts.id')
                ->where('user_id', Auth::id())
                ->orderByDesc('created_at')
                ->limit(1),
            'desc' // Explicit 'desc' here
        )
    )->get();

After (Laravel 12.17.0):

use App\Models\Product;
use App\Models\Post;
use App\Models\Comment;
use Illuminate\Support\Facades\Auth;

// Simpler descending reordering of products by price.
$expensiveProducts = Product::orderBy('name')
    ->reorderDesc('price')
    ->get();

// Cleaner complex reordering:
$posts = Post::orderBy('title')
    ->when(
        Auth::check(),
        fn($query) =>
        $query->reorderDesc( // Using reorderDesc()
            Comment::select('created_at')
                ->whereColumn('post_id', 'posts.id')
                ->where('user_id', Auth::id())
                ->orderByDesc('created_at')
                ->limit(1)
        )
    )->get();

This subtle addition improves code readability and conciseness, especially when dealing with dynamic or nested ordering logic.

2. Enhanced URI Handling with AsUri Model Cast

Dealing with URLs in web applications is ubiquitous, from storing user profile links to external API endpoints. Laravel 12.17.0 introduces the AsUri model cast, which automatically transforms string attributes into Illuminate\Support\Uri instances and vice-versa. This powerful feature provides a structured and convenient way to interact with URI components.

The Problem It Solves:

Before AsUri, if you stored a URL as a string in your database, retrieving its components (like host, path, or query parameters) typically required manual string parsing or using PHP's parse_url() function, which could be cumbersome and error-prone.

The AsUri Solution:

By simply declaring an attribute with the AsUri cast in your Eloquent model, Laravel handles the conversion seamlessly. The underlying Illuminate\Support\Uri class (which extends Illuminate\Support\Stringable) provides a rich API for URI manipulation.

Real-World Example:

Consider a User model that stores a website_url and a profile_picture_cdn link, or a Project model with an external_repository_url.

// app/Models/User.php
use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\Casts\AsUri;
use Illuminate\Support\Uri; // To manually create Uri instances if needed

class User extends Model
{
    protected $casts = [
        'website_url'       => AsUri::class,
        'profile_picture_cdn' => AsUri::class,
    ];
}

// In a controller or service:
$user = User::find(1);

// Storing a URL:
$user->website_url = 'https://www.example.com/blog/my-article?category=tech&id=123';
$user->profile_picture_cdn = 'https://cdn.images.com/users/123/avatar.png';
$user->save();

// Accessing the casted attribute:
// $user->website_url is now an instance of Illuminate\Support\Uri
echo $user->website_url->host();      // Output: www.example.com
echo $user->website_url->path();      // Output: /blog/my-article
echo $user->website_url->query();     // Output: category=tech&id=123
echo $user->website_url->scheme();    // Output: https
echo $user->website_url->port();      // Output: (empty string if default port)
echo $user->website_url->withQuery(['search' => 'laravel'])->__toString();
// Output: https://www.example.com/blog/my-article?search=laravel

// You can also compare Uri instances:
if ($user->profile_picture_cdn->host() === 'cdn.images.com') {
    // Logic for CDN assets
}

// The __toString() method allows direct string usage:
echo "Visit my website: " . $user->website_url; // Automatically converts to string

This cast significantly improves type safety and provides a fluent API for working with URI data directly from your models, reducing boilerplate and potential errors.

3. Powerful Dependency Injection with Contextual Service Container Binding via PHP Attributes

Laravel's Service Container is a cornerstone of its architecture, enabling flexible dependency injection. Laravel 12.17.0 introduces an elegant new way to perform contextual binding using PHP attributes, making your container definitions even more declarative and localized.

The Problem It Solves:

Traditionally, contextual binding (where a specific implementation of an interface or class is injected based on the consumer) was configured using the when()->needs()->give() syntax within a Service Provider. While effective, this could sometimes lead to a centralized, verbose provider if many contextual bindings were needed.

The PHP Attribute Solution:

With the new #[ContextualBinding] attribute (or similar specific contextual attributes like #[Config], #[Auth], etc., which also leverage this mechanism), you can define these bindings directly on the constructor parameter where the dependency is needed.

Real-World Example:

Imagine you have an PaymentGatewayInterface and two implementations: StripePaymentGateway and PayPalPaymentGateway. You might want to use StripePaymentGateway for your main OrderProcessor but PayPalPaymentGateway for a specific SubscriptionManager.

// app/Contracts/PaymentGatewayInterface.php
namespace App\Contracts;

interface PaymentGatewayInterface
{
    public function processPayment(float $amount): bool;
}

// app/Services/StripePaymentGateway.php
namespace App\Services;
use App\Contracts\PaymentGatewayInterface;

class StripePaymentGateway implements PaymentGatewayInterface
{
    public function processPayment(float $amount): bool {
        // Stripe specific logic
        return true;
    }
}

// app/Services/PayPalPaymentGateway.php
namespace App\Services;
use App\Contracts\PaymentGatewayInterface;

class PayPalPaymentGateway implements PaymentGatewayInterface
{
    public function processPayment(float $amount): bool {
        // PayPal specific logic
        return true;
    }
}

// app/Services/OrderProcessor.php
namespace App\Services;
use App\Contracts\PaymentGatewayInterface;
use Illuminate\Container\Attributes\ContextualBinding; // Import the attribute

class OrderProcessor
{
    public function __construct(
        #[ContextualBinding(implementation: StripePaymentGateway::class)]
        PaymentGatewayInterface $paymentGateway // Inject Stripe here
    ) {
        $this->paymentGateway = $paymentGateway;
    }

    public function handleOrder(float $amount): bool {
        return $this->paymentGateway->processPayment($amount);
    }
}

// app/Services/SubscriptionManager.php
namespace App\Services;
use App\Contracts\PaymentGatewayInterface;
use Illuminate\Container\Attributes\ContextualBinding; // Import the attribute

class SubscriptionManager
{
    public function __construct(
        #[ContextualBinding(implementation: PayPalPaymentGateway::class)]
        PaymentGatewayInterface $paymentGateway // Inject PayPal here
    ) {
        $this->paymentGateway = $paymentGateway;
    }

    public function manageSubscription(float $amount): bool {
        return $this->paymentGateway->processPayment($amount);
    }
}

// No need for explicit 'when()->needs()->give()' in a Service Provider for these specific cases!

This approach makes contextual bindings more explicit and local to where they are being used, leading to cleaner service providers and easier-to-understand dependency graphs. It leverages PHP 8's attribute syntax for a modern, declarative DI experience.

Conclusion

Laravel 12.17.0 might be a minor release, but its additions are far from insignificant. The reorderDesc() method brings welcome conciseness to querying, the AsUri cast simplifies complex URI manipulations, and attribute-based contextual binding offers a powerful new paradigm for dependency injection. These features collectively contribute to Laravel's ongoing mission to provide an enjoyable and efficient development experience. We encourage all Laravel developers to explore these updates and integrate them into their projects to benefit from cleaner, more robust codebases.

What Are Named Middlewares?

Named middlewares in Laravel are a powerful way to enhance your application's security and control by attaching middleware to named routes or groups of routes. By assigning a unique name to your middleware, you can easily apply it to multiple routes, simplifying maintenance and reducing redundancy in your code.

The Importance of Named Middlewares

1. Code Organization: Named middlewares help you keep your codebase clean and well-structured. Instead of attaching the same middleware to multiple routes, you can simply reference the middleware by its name, making your code more concise and maintainable.

2. Security and Access Control: With named middlewares, you can easily protect your routes from unauthorized access. Whether it's authentication, role-based permissions, or custom authorization logic, you can centralize security measures in a single middleware and apply it consistently across your application.

How to Define Named Middlewares

Let's get our hands dirty by diving into the code. Defining named middlewares in Laravel is straightforward. Here's an example of how to do it:

// In app/Http/Kernel.php

protected $routeMiddleware = [
    'auth' => \App\Http\Middleware\Authenticate::class,
    'admin' => \App\Http\Middleware\Admin::class,
    'api' => \App\Http\Middleware\Api::class,
];

In this example, we've defined three named middlewares: 'auth,' 'admin,' and 'api.' Now, we can easily apply these named middlewares to our routes.

Applying Named Middlewares to Routes

To apply a named middleware to a route, use the middleware method in your route definition. Here's an example:

// In routes/web.php
Route::get('/admin/dashboard', 'AdminController@dashboard')
    ->middleware('auth', 'admin');

In this example, we're applying the 'auth' and 'admin' middlewares to the '/admin/dashboard' route. It's that simple!

Conclusion

Named middlewares in Laravel are a game-changer for developers looking to streamline their application code and improve security. By giving your middleware a name, you can easily attach it to routes, groups of routes, and even controller constructors. This approach not only improves code organization but also enhances the security of your application. So, the next time you're working on a Laravel project, don't forget to leverage the power of named middlewares to make your development process smoother and more secure. Happy coding!

Laravel Pint is a first-party package from the Laravel core team for PHP code style fixing. It is built on top of PHP-CS-Fixer and makes it simple to ensure your code style is clean and consistent.

Pint is installed by default on the new Laravel applications, so you can use it immediately as soon as you create a new Laravel project.

Why do you need it?

This is an important question. Why do you really need Pint?

Your role as a developer on a project is to work on the solution that adds value to the project. And you should not keep going back and forth on formatting your code here and there, also not to mention to review those linting/formatting manually before the commits or merging a pull request.

So Pint or basically any linting tool takes this responsibility off your shoulders and allows you to think and work on solutions rather than wasting time on code styling and formatting.

With the clarification on why you need Pint on your project, let’s see how you can install and use Laravel Pint on your project.

How to install and use Laravel Pint on your project?

I was thinking to add the process for installing Pint on the Laravel project, but as I was doing research for this post, I found that the new Laravel projects already have it installed by default. So you can use it without any effort on configuring it.

Installation

However, if you want to install it on your existing project, you may install Laravel Pint via Composer:

composer require laravel/pint --dev

Formatting code using Pint

By adding the composer package, the pint binary is added to your vendor/bin directory. You can run pint to fix your code style just by issuing the below command.

./vendor/bin/pint

Based on your preference you may only want to update the files that are changed. You can use the below command, it will fix the code styling for only the files that have uncommitted changes according to Git.

./vendor/bin/pint --dirty

You can find more details on configuring Pint according to your requirements on the official Laravel Pint documentation.

Conclusion

Pint could be a very handy tool especially when you are working with teams. You can set up workflows that can detect code styling issues before merging a pull request. You can also set up the code styling rules that everyone should follow, and you can use Pint to validate that too.

Note: I advocate for Laravel projects most of the time, but was recently looking on how Adonis is doing, which is created from inspiration on Laravel and Rails. That is when this article comes to its being.

AdonisJS is a great Node.js framework. As a developer you can just get started by using it for your next project. It is flexible and written using typescript.

Although, you can build great web project with Adonis with a very good speed, you can boost your development with Tailwind CSS which is gaining popularity in the web development industry. But there is no straight forward guide on how to install Tailwind CSS on Adonis projects. So in this article we will go through the steps to setup an Adonis project with Tailwind CSS.

Create your project

Start by creating a new AdonisJS project if you don’t have one set up already. Choose "web" when installer asks to select project structure. Press "y" when it asks "Configure webpack encore for compiling frontend assets?"

npm init adonis-ts-app@latest my-project
cd my-project

Install Tailwind CSS

Using npm, install tailwindcss and its peer dependencies, as well as postcss-loader, and then run the init command to generate both tailwind.config.js and postcss.config.js.

npm install -D tailwindcss postcss autoprefixer postcss-loader
npx tailwindcss init -p

Enable PostCSS support

In your webpack.config.js file, enable PostCSS Loader. See the documentation for more information.

Encore
  // ...
  .enablePostCssLoader()
;

Configure your template paths

Add the paths to all of your template files in your tailwind.config.js file.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./resources/**/*.edge",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Add the Tailwind directives to your CSS

Add the @tailwind directives for each of Tailwind’s layers to your ./resources/css/app.css file.

@tailwind base;
@tailwind components;
@tailwind utilities;

Start your build process

Run your build process with npm run dev.

npm run dev

Start using Tailwind in your project

Make sure your compiled CSS is included in the <head> then start using Tailwind’s utility classes to style your content.

welcome.edge

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  @entryPointStyles('app')
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>

That's it. Your Adonis project is now ready. You can leverage the tailwind utilities in your project to create awesome interfaces.

This post assumes you are pretty well aware of how Laravel, Vuejs, and both with each other work. So please follow along if you are looking for a solution to authenticate your Vue apollo frontend with Laravel Sanctum guard.

Recently, I have been trying to setup Laravel Sanctum with my new project which uses a frontend of Vue js configured with vue router and apollo to work with graphql request.

Sanctum Middleware

Laravel Sanctum has a great middleware that you can apply on your Laravel backend to authenticate your frontend requests with your cookies.

This middleware directly authenticates a user by session and cookies as it works in the out of the box authentication provided by Laravel.

Vue apollo uses fetch API to make requests to the backend and you can use any fetch options when configuring an httpLink for your vue apollo provider.

I was looking for solutions on the internet but could not find a clear solution on how this can be implemented for this specific scenario, so I am writing this article.

Vue apollo setup

Below is the code snippet to configure standard apollo client for a vue application

import Vue from 'vue';
import VueApollo from 'vue-apollo';

Vue.use(VueApollo);

import { ApolloClient } from 'apollo-client';
import { createHttpLink } from 'apollo-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';

const httpLink = createHttpLink({ uri: '/api/graphql', }); // The graphql endpoint url

// Cache implementation
const cache = new InMemoryCache();

// Create the apollo client
const apolloClient = new ApolloClient({ link: httpLink, cache, });

// Create the provider for Vue
const apolloProvider = new VueApollo({ defaultClient: apolloClient, });

// Initialize vue instance
const app = new Vue({ el: '#app', apolloProvider }); // Register the provider with Vue instance

This configuration is useful when you want to create a GraphQL client without authenticating your requests. But if you want to authenticate your requests with Sanctum's EnsureFrontendRequestsAreStateful middleware, you have to make additional configurations.

By some research, I have been able to make an easy solution to authenticate requests with Sanctum sessions. Please check the below updated code.

import Vue from 'vue';
import VueApollo from 'vue-apollo';

Vue.use(VueApollo);

import { ApolloClient } from 'apollo-client';
import { createHttpLink } from 'apollo-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { setContext } from 'apollo-link-context';

// XSRF token is required to make post requests to your Laravel backend
const authLink = setContext((_, { headers }) => { let token = RegExp('XSRF-TOKEN[^;]+').exec(document.cookie) token = decodeURIComponent(token ? token.toString().replace(/^[^=]+./, '') : '') return { headers: { ...headers, 'X-XSRF-TOKEN': token, }, }; });

const httpLink = createHttpLink({ uri: '/api/graphql', credentials: 'same-origin', }); // The graphql endpoint url

// Cache implementation
const cache = new InMemoryCache();

// Create the apollo client
const apolloClient = new ApolloClient({ link: authLink.concat(httpLink), cache, });

// Create the provider for Vue
const apolloProvider = new VueApollo({ defaultClient: apolloClient, });

// Initialize vue instance
const app = new Vue({ el: '#app', apolloProvider }); // Register the provider with Vue instance

These changes will allow your front end to send cookies with your frontend to your backend, so that the backend can verify the user's authentication by cookie/session.

This feature of Sanctum is very powerful when you want to create an SPA that works with your domain and that without exposing your backend to CSRF requests.

And that's what needs to be configured to authenticating a vue apollo graphql with laravel sanctum backend.

First things first.

Find your concentration

First of all, before using approaches and tools, identify what is distracting you from concentrating.

It takes an average of about 25 minutes (23 minutes and 15 seconds, to be exact) to return to the original task after an interruption, according to Gloria Mark, who studies digital distraction at the University of California, Irvine.

So take time to make a list of distractions that breaks your concentration now and then. This list might contain your dinging phone, people moving by you, or anything else that you think is taking your concentration away. Make sure this distractions don't take your concentration away unless important.

Sometimes it happens you are working on something important and you have a thought that also needs attention, and your mind drifts towards that other thought and then this happens again with another different thought which again does the same. It breaks you from focusing on one thing and keeps your mind swirling between one thought and another.

Here comes our next friend to help us clear thing.

Write down in between thoughts

Do you think it is alright to discard your thoughts of something else, while your are working on whole different thing. I think it is not.

I prefer writing my in between thoughts, so that my mind let me focus on my current task. And as I have jotted down my thoughts in between, I have the ability to think and prioritize those tasks and even discard some of them at a later point of time. But it is a good practice of having a record of your in between thoughts so that you have something to think of when your mind is free from one task.

Here comes our next friend towards productivity.

Use tools that help you track the tasks and thoughts.

Collaboration tools

Collaboration tools help you track the progress of tasks and the current status of overall process. Although its best suited to teams, its really helpful for individuals.

We just talked about writing the in between thoughts, you can use online tools like Trello to make the list of thoughts. Trello also helps you realize the process of your end product. So once you have your list with ideas in the board, you can at any point of time decide if you want to work on this, or want to work on it later, it needs some kind of research or you want to discard it.

Using Trello or any other visualized project management system opens up a birds eye view with eagle's eyes for you. I will not go into deep how Trello works, but here is simple explanation.

In Trello, there are two thing which we will take into account for our approach. Lists and Cards. Lists are columns which contatins cards. Think of lists as a part of process to realize your ides. And cards are the thoughts/tasks which eventually gets realized.

See the image:

Sometimes a thought has a very large scope and needs to be broken down into smaller pieces. You can even create separate cards with broken down pieces of the actual idea. This helps you concentrate on the smaller part and let you earn the small wins to achieve your goal.

Trello is just an example here, you can use whichever tool you prefer, even a notebook and pencil is enough. The process is important.

Find your corner

The title for this section, is just out from mind. But the concept has strong impact on your productivity.

Choose your place to work, and stick with the place. Do not do other things on your workplace. As of writing this article, most of the developers are working from home. And working from home is good but has an impact on your productivity if you are not able to separate your work and your home.

So, choose your place to work where you can work comfortably. Regularly use the same place and settings to work, it generates you an environment for your work. Studies find that people tend to stay focused for longer durations if they have the maintained environment. Meaning you can create your own work environment. Your mind will automatically let you focus on your work, as it knows that you regularly work in this environment.

Let me know, if the tips were helpful or not.

Thanks for getting until here. This is my very first article. If you like it, please share it. Also let me know if I have made mistakes in the article, I am learning to create the content that can help people.