single-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

Package Sidebar

Install

npm i single-blade-components

Weekly Downloads

0

Version

0.0.1

License

MIT

Unpacked Size

8.54 kB

Total Files

5

Last publish

Collaborators

  • kuroro-6315