PHPackages                             theokbokki/blade-sfc - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Templating & Views](/categories/templating)
4. /
5. theokbokki/blade-sfc

ActiveLibrary[Templating & Views](/categories/templating)

theokbokki/blade-sfc
====================

A laravel package that adds blade directives for writing css, scss, javascript and typescript directly in your blade views.

414PHP

Since Oct 14Pushed 1y ago1 watchersCompare

[ Source](https://github.com/theokbokki/blade-sfc)[ Packagist](https://packagist.org/packages/theokbokki/blade-sfc)[ RSS](/packages/theokbokki-blade-sfc/feed)WikiDiscussions main Synced 1mo ago

READMEChangelogDependenciesVersions (1)Used By (0)

Blade SFC
=========

[](#blade-sfc)

I really like the way javascript frameworks like [Vue](https://vuejs.org/) or [Svelte](https://svelte.dev/) structure their templates, it looks sort of like this:

```

    document.querySelector(".my-component").innerText = "Maybe star this repo ?"

    .my-component {
        background: red;
    }

```

But I hate using javascript for dealing with backend stuff so I use [Laravel](https://laravel.com/).

And that's why I created blade directives to use [Blade components](https://laravel.com/docs/11.x/blade#main-content) like you would Svelte or Vue ones. (You can read more about it [here](https://theoo.dev/en/articles/blade-sfc))

```
@javascript()

    document.querySelector(".my-component").innerText = "Maybe star this repo ?"

@endjavascript

@css()

    .my-component {
        background: red;
    }

@endcss
```

And you could also use `SCSS` or `Typescript`

```
@javascript('/js/my-file.ts')

    let starRepo: boolean;

    starRepo = true;
    console.log(starRepo);

@endjavascript
@css('/css/my-file.scss')

    $color: red;
    .profile-picture {
        color: $color;
    }

@endcss
```

Requirements
------------

[](#requirements)

The blade-sfc package requires PHP 8.0+, Laravel 9+.

Installing
----------

[](#installing)

You can install the package via composer:

```
composer require theokbokki/blade-sfc
```

Then add `BladeSfcServiceProvider` to your list of service providers in `bootstrap/app.php`:

```
return [
    App\Providers\AppServiceProvider::class,
    Theokbokki\BladeSfc\BladeSfcServiceProvider::class,
];
```

Using
-----

[](#using)

### Css rules

[](#css-rules)

The `@css()...@endcss` rules work as follow:

```
@css('/optional/pathname.css')

    // Your CSS

@endcss
```

If a pathname is provided, the code will try to find or create the file in the `resource_path()` directory.

If no pathname is provided, the code will be added to the file defined in the config (`/resources/css/generated.css` by default). You can then import it in your main `CSS` entry point.

The `` tags are optional, you can add them for better syntax highlighting.

### JS rules

[](#js-rules)

The `@javascript()...@endjavascript` rules work as follow:

```
@javascript('/optional/pathname.js')

    // Your JS

@endjavascript
```

If a pathname is provided, the code will try to find or create the file in the `resource_path()` directory.

If no pathname is provided, the code will be added to the file defined in the config (`/resources/js/generated.js` by default). You can then import it in your main `JS` entry point.

The `` tags are optional, you can add them for better syntax highlighting.

### The `blade-sfc:compile` command

[](#the-blade-sfccompile-command)

This command is used to parse the blade files and put the JS and CSS content into the correct files. It's used like so:

```
php artisan blade-sfc:compile
npm run build
```

If you want to avoid running it manually, you can use [vite-plugin-run](https://github.com/innocenzi/vite-plugin-run/tree/main). Here's how to modify your vite config:

```
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import { run } from 'vite-plugin-run'

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'], // Or whatever your CSS and JS files are
            refresh: true,
        }),
        run([
            {
 ,              name: 'compile views',
                run: ['php', 'artisan', 'blade-sfc:compile'],
                condition: (file) => file.includes('.blade.php'),
            },
        ]),
    ]
});
```

Configuration
-------------

[](#configuration)

You can publish the package's configuration like so:

```
php artisan vendor:publish --tag=blade-sfc-config
```

The configuration file allows you to choose where you want to output your `JS` and `CSS` by default.

Future improvements
-------------------

[](#future-improvements)

- Allow for blade statements to be used inside JS and CSS. (Is currently a problem because of unknown variables at render time).

###  Health Score

16

—

LowBetter than 5% of packages

Maintenance29

Infrequent updates — may be unmaintained

Popularity10

Limited adoption so far

Community7

Small or concentrated contributor base

Maturity17

Early-stage or recently created project

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

### Community

Maintainers

![](https://www.gravatar.com/avatar/c3e9c9ea4afd7d211e01f3e6da7dda4d5f4570e6871629b506bfc1a2f7f2d507?d=identicon)[theokbokki](/maintainers/theokbokki)

---

Top Contributors

[![theokbokki](https://avatars.githubusercontent.com/u/90846584?v=4)](https://github.com/theokbokki "theokbokki (11 commits)")

### Embed Badge

![Health badge](/badges/theokbokki-blade-sfc/health.svg)

```
[![Health](https://phpackages.com/badges/theokbokki-blade-sfc/health.svg)](https://phpackages.com/packages/theokbokki-blade-sfc)
```

###  Alternatives

[mustache/mustache

A Mustache implementation in PHP.

3.3k44.6M291](/packages/mustache-mustache)[roots/acorn

Framework for Roots WordPress projects built with Laravel components.

9682.1M97](/packages/roots-acorn)[whitecube/nova-flexible-content

Flexible Content & Repeater Fields for Laravel Nova.

8053.0M25](/packages/whitecube-nova-flexible-content)[mopa/bootstrap-bundle

Easy integration of twitters bootstrap into symfony2

7042.9M33](/packages/mopa-bootstrap-bundle)[limenius/react-bundle

Client and Server-side react rendering in a Symfony Bundle

3871.2M](/packages/limenius-react-bundle)[nicmart/string-template

StringTemplate is a very simple string template engine for php. I've written it to have a thing like sprintf, but with named and nested substutions.

2101.7M30](/packages/nicmart-string-template)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)