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 yesterday

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 4% of packages

Maintenance28

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://avatars.githubusercontent.com/u/90846584?v=4)[théoo](/maintainers/theokbokki)[@theokbokki](https://github.com/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

[limenius/react-bundle

Client and Server-side react rendering in a Symfony Bundle

3851.2M](/packages/limenius-react-bundle)[area17/laravel-auto-head-tags

Laravel Auto Head Tags helps you build the list of head elements for your app

4616.1k](/packages/area17-laravel-auto-head-tags)[jelix/wikirenderer

WikiRenderer is a library to generate HTML or anything else from wiki content.

1712.3k1](/packages/jelix-wikirenderer)[webkinder/sproutset

A Composer package for handling responsive images in Roots Bedrock + Sage + Blade projects.

282.2k](/packages/webkinder-sproutset)[muratbsts/mail-template

This package is a easy to use mail template collection for Laravel 5.x.

191.3k](/packages/muratbsts-mail-template)

PHPackages © 2026

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