INSTALLATION · LARAVEL

Using Laravel

Extend Laravel's existing Vite configuration with Coordiation, scan the resources directory, and load the virtual stylesheet from the application entry.

✓

The scanner recognizes .php files, so literal utilities written directly in Blade templates are included automatically.

Install the Vite adapter

Keep Laravel's existing Vite packages and add the Coordiation compiler plus its adapter.

Terminal

npm install -D @coordiation/css @coordiation/vite

Extend Laravel Vite

Preserve the Laravel plugin and add Coordiation to the same plugin array. The complete resources tree becomes the scan boundary.

vite.config.js

import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";
import coordiation from "@coordiation/vite";

export default defineConfig({
  plugins: [
    coordiation({
      content: ["resources"],
      cssFile: "resources/css/coordiation.css"
    }),
    laravel({
      input: ["resources/js/app.js"],
      refresh: true
    })
  ]
});

Create the CSS entry

Add the framework marker and any project-specific theme tokens.

resources/css/coordiation.css

@coordiation;

@co-theme {
  --co-color-brand-500: oklch(62.3% 0.214 259.815);
}

Import generated CSS

Load the virtual module through Laravel's JavaScript entry, then keep the normal Blade @vite directive.

resources/js/app.js

import "./bootstrap";
import "virtual:coordiation.css";

resources/views/layouts/app.blade.php

<!doctype html>
<html lang="en">
  <head>
    @vite("resources/js/app.js")
  </head>
  <body>
    @yield("content")
  </body>
</html>

Use utilities in Blade

Blade templates, Livewire views, and frontend components are scanned when they live beneath resources.

resources/views/welcome.blade.php

<main class="co-grid co-min-h-screen co-place-items-center co-bg-black co-text-white">
  <h1 class="co-text-6xl co-font-bold">Built with Coordiation</h1>
</main>

Terminal

npm run dev
npm run build

PRODUCTION CHECKLIST

Ship predictable CSS

Keep the scanner boundary and generated stylesheet explicit so people, CI, and AI agents produce the same result.

Open Laravel Vite documentation →

Keep Laravel's @vite directive pointed at the JavaScript entry that imports the virtual stylesheet.
Add package or module view directories to content when templates live outside resources.
Write complete candidates inside Blade conditionals instead of concatenating class fragments.
Run npm run build before deploying PHP files and the generated Vite manifest.

Previous← Using Astro NextUsing SvelteKit →