Have ideas to improve npm?Join in the discussion! »

    single-file-blade-components

    0.0.1 • Public • Published

    Single File Blade Components

    Software License Latest Version on NPM

    Laravel Mix extension which lets you use blade components like Vue's single file components.

    Single File Blade Components

    Usage

    First, install the extension.

    npm install single-file-blade-components --save-dev
    

    Then, require it within your webpack.mix.js file:

    let mix = require('laravel-mix');
     
    require('single-file-blade-components');
     
     
    mix.sfbc('resources/views/components/alert.blade.php', 'public/js/alert.js');
     
    // or
     
    mix.singleFileBladeComponent('resources/views/components/alert.blade.php', 'public/js/alert.js');

    How it works

    This extension extracts JS/CSS from blade file into separate JS/CSS file. During build process, it extracts style or x-style tag content into a separate css file and script or x-script tag content into a separate js file.

    Video demo

    Examples:

    Minimal example

    alert.blade.php

    <x-template>
        <div class="title">
            Hello {{ $bladeVarialbe }},
            <button id="btn">Sign In</button>
        </div>
    </x-template>
     
    <style>
        .title {
            color: #333;
            font-size: 20px;
        }
    </style> 
     
    <script>
        document.querySelector('click', function(){
            alert('hello');
        })
    </script> 

    webpack.mix.js

    mix.sfbc('resources/views/components/alert.blade.php', 'dist/js/alert.js');

    Note: You will have to create x-template blade component.

    CSS Pre-Processors

    Use `lang' attribute to set css pre-processor

    <x-template>
        <div>
            <h1>Hello</h1>
        </div>
    </div>
    </x-template>
     
    <x-style lang="scss">
        div {
            h1 {
                color: #333;
            }
        }
    </x-style>

    CSS extraction

    By default CSS declared in the blade file will be extracted into a separate file. You can disable this behavior by setting the extract attribute value as false.

    For extract="false", it keeps CSS in the js file and gets injected into the dom via JS.

    <x-template>
        <h1>Hello</h1>
    </div>
    </x-template>
     
    <x-style extract="false">
        h1 {
            color: #333;
        }
    </x-style>

    Options

    This plugin use mini-css-extract-plugin for css extraction. You can change mini-css-extract-plugin configuration via miniCssExtractPlugin option.

    mix.options({
        miniCssExtractPlugin: {
            filename: '[name].css'
        }
    })

    Caveat

    Code written in script or style tag should not be rendered directly on the frontend as it is a untranspiled code. To avoid this you can wrap script and style tag in falsy if statement or create x-style and x-script blade component.

    @if(false)
        <style>
            h1 {
                color: red;
            }
        </style> 
    @endif
     
    @if(false)
        <script>
            alert('test');
        </script> 
    @endif
     

    Install

    npm i single-file-blade-components

    DownloadsWeekly Downloads

    0

    Version

    0.0.1

    License

    MIT

    Unpacked Size

    8.56 kB

    Total Files

    5

    Last publish

    Collaborators

    • avatar