webpack-blade-loader
A webpack loader for blade template engine.
Getting Started
To begin, you'll need to install webpack-blade-loader:
$ npm install webpack-blade-loader --save-devwebpack.config.js
moduleexports = module: rules: test: /\.blade.html/ use: loader: "webpack-blade-loader" options: viewDir: "./views" ;And run webpack via your preferred method.
Options
viewDir
Type: String
Default: ''
The path of the directory where template files are located.
extension
Type: String
Default: '.blade.html'
The extension of the template files.
Code Formatting
Visual Studio Code
First of all, you need to install Laravel Blade Snippets extention. Then open settings.json and add following lines:
"blade.format.enable": true"files.associations": "*.blade.html": "blade""[blade]": "editor.formatOnSave": trueAfter that, your editor will support Laravel blade snippets and syntax highlight.
Example
layout.blade.html
App Name - @yield('title') @section('sidebar') @yield('content') ### index.blade.html
@extends('layout') @section('title', 'Home Page') @section('sidebar')This is my sidebar.@endsection @section('content')This is my body content.// Static component@component('components.button')// Dynamic components@component('components.button',{"name":"David"})@component('components.button',{"name":"John","age":21}) Button content @endcomponent@endsection