codeiucom/laravel-sfb

CodeIU Laravel Single File Blade

Installs: 6

Dependents: 0

Suggesters: 0

Security: 0

Stars: 0

Watchers: 1

Forks: 0

Open Issues: 0

Language:JavaScript

Type:framework

v1.0.0 2022-03-01 09:00 UTC

This package is auto-updated.

Last update: 2024-04-29 04:47:42 UTC


README

script/style section convert to js/css file.

install

use composer

composer require codeiucom/laravel-sfb

Use normal (without laravel-mix)

  1. sample-layout.blade.php

    <!doctype html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Document</title>
            @stack('head-style')
        </head>
        <body>
            @yield('content')
    
            @stack('body-js')
        </body>
    </html>
  2. sample.blade.php

    @include('sample-layout')
    
    @section('content')
    <div>
        text
    </div>
    @endsection
    
    @sfbScript('body-js')
    <script>
        console.log("test");
    </script>
    @endSfb
    
    @sfbStyle('head-style')
    <style>
        .div {
            color: gray;
        }
    </style>
    @endSfb
  3. reload browser

Use with laravel-mix

install npm package

npm install vendor/codeiucom/laravel-sfb/node_module

Use

  1. edit laravel.mix.js

    • normal

      require("codeiucom-laravel-sfb");
      mix.sfb(`resources/views/**/*.blade.php`);
    • or with scss options

      require("codeiucom-laravel-sfb");
      mix.sfb(`resources/views/**/*.blade.php`, {
          sass: {
              pluginOptions: [],
              postCssPlugins: [require("tailwindcss")],
          },
      });
  2. sample.blade.php

    @include('sample-layout')
    
    @section('content')
    <div>
        text
    </div>
    @endsection
    
    @sfbMixScript('body-js')
    <script>
        console.log("test");
    </script>
    @endSfb
    
    <!-- with sass: type="text-scss" -->
    @sfbMixStyle('head-style')
    <style type="text/scss">
        .div {
            color: gray;
        }
    </style>
    @endSfb
  3. run laravel mix

    npm run dev
    # or
    npm run prod

Option

change compiled path

Default path: /public/assets/sfb
edit .env file

# /public/vdendor/sfb is
CODEIU_LARAVEL_SFB_FILE_DIR=vendor/sfb

change laravel mix compiled path

edit .env file

CODEIU_LARAVEL_SFB_MIX_FILE_DIR=sfb