PHPackages jqhtml/laravel - 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. jqhtml/laravel
ActiveLibrary[Templating & Views](/categories/templating)
jqhtml/laravel
==============
Laravel integration for jqhtml - use jqhtml components in Blade templates with automatic hydration
04PHP
Since Nov 28Pushed 5mo agoCompare
[ Source](https://github.com/jqhtml/jqhtml-laravel)[ Packagist](https://packagist.org/packages/jqhtml/laravel)[ RSS](/packages/jqhtml-laravel/feed)WikiDiscussions main Synced 1mo ago
READMEChangelogDependenciesVersions (1)Used By (0)
jqhtml/laravel
==============
[](#jqhtmllaravel)
Laravel Blade integration for [jqhtml](https://jqhtml.org/).
This package provides a Blade precompiler that lets you use jqhtml component syntax directly in your templates.
Requirements
------------
[](#requirements)
- PHP 8.1+
- Laravel 10, 11, or 12
- Node.js 18+
Installation
------------
[](#installation)
```
composer require jqhtml/laravel:dev-main
php artisan jqhtml:install
npm install
```
The package is currently in development and requires the `dev-main` branch.
The install command automatically:
- Adds npm dependencies to package.json
- Configures the Vite plugin
- Sets up app.js with jqhtml boot code
- Creates the `resources/jqhtml/` directory
Usage
-----
[](#usage)
### Using Components in Blade
[](#using-components-in-blade)
Write components directly in your Blade templates:
```
```
Pass PHP variables with the `:` prefix:
```
```
Components can contain content:
```
This content is available via content() in the template.
```
### Registering Components
[](#registering-components)
Create `.jqhtml` files in `resources/jqhtml/`, then register them in `resources/js/app.js`:
```
// Template-only components
import AlertBox from '../jqhtml/AlertBox.jqhtml';
import UserCard from '../jqhtml/UserCard.jqhtml';
// Interactive components with JS class
import Counter from '../jqhtml/Counter.js';
jqhtml.register(AlertBox);
jqhtml.register(UserCard);
jqhtml.register(Counter);
```
### Interactive Components
[](#interactive-components)
For components with behavior, create a JS class alongside the template:
```
-
+
```
```
// resources/jqhtml/Counter.js
import { Jqhtml_Component } from '@jqhtml/core';
import CounterTemplate from './Counter.jqhtml';
class Counter extends Jqhtml_Component {
on_create() {
this.data.count = this.args.initial || 0;
}
on_ready() {
this.$sid('increment').on('click', () => {
this.data.count++;
this.$sid('display').text(this.data.count);
});
this.$sid('decrement').on('click', () => {
this.data.count--;
this.$sid('display').text(this.data.count);
});
}
}
export default Counter;
```
#### Note on Minification
[](#note-on-minification)
If your build uses class name mangling, you must either:
1. Add `static component_name = 'Counter'` to each component class, or
2. Use explicit registration:
```
jqhtml.register_template(CounterTemplate);
jqhtml.register_component('Counter', Counter);
```
### How It Works
[](#how-it-works)
The Blade precompiler transforms component tags into hydration placeholders:
```
Blade:
↓
HTML:
↓
Live: ...
```
The client-side `boot()` function finds these placeholders and hydrates them into live components.
Manual Installation
-------------------
[](#manual-installation)
If you prefer manual setup instead of `php artisan jqhtml:install`:
1. Install npm packages:
```
npm install @jqhtml/core@latest @jqhtml/vite-plugin@latest jquery
```
2. Add the plugin to `vite.config.js`:
```
import jqhtml from '@jqhtml/vite-plugin';
export default defineConfig({
plugins: [
jqhtml(),
laravel({ /* ... */ }),
],
});
```
3. Set up `resources/js/app.js`:
```
import $ from 'jquery';
window.jQuery = window.$ = $;
import jqhtml, { boot, init_jquery_plugin } from '@jqhtml/core';
init_jquery_plugin($);
// Register your components here
$(document).ready(async () => {
await boot();
});
```
Documentation
-------------
[](#documentation)
For complete documentation including template syntax, lifecycle methods, and component patterns:
****
License
-------
[](#license)
MIT - Copyright (c) hansonxyz
### Health Score
17
—
LowBetter than 6% of packages
Maintenance48
Moderate activity, may be stable
Popularity3
Limited adoption so far
Community2
Small or concentrated contributor base
Maturity13
Early-stage or recently created project
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
[jqhtml](/maintainers/jqhtml)
### Embed Badge
```
[](https://phpackages.com/packages/jqhtml-laravel)
```
### Alternatives
[mustache/mustache
A Mustache implementation in PHP.
3.3k44.6M291](/packages/mustache-mustache)[roots/acorn
Framework for Roots WordPress projects built with Laravel components.
9682.1M97](/packages/roots-acorn)[whitecube/nova-flexible-content
Flexible Content & Repeater Fields for Laravel Nova.
8053.0M25](/packages/whitecube-nova-flexible-content)[mopa/bootstrap-bundle
Easy integration of twitters bootstrap into symfony2
7042.9M33](/packages/mopa-bootstrap-bundle)[limenius/react-bundle
Client and Server-side react rendering in a Symfony Bundle
3871.2M](/packages/limenius-react-bundle)[nicmart/string-template
StringTemplate is a very simple string template engine for php. I've written it to have a thing like sprintf, but with named and nested substutions.
2101.7M30](/packages/nicmart-string-template)
PHPackages © 2026
[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)