PHPue is a PHP framework that brings the simplicity of Vue's component model to server-side rendering. Build modern web applications without the complexity of build tools or client-side hydration.
A PHP framework that uses Vue-like syntax for server-side rendering. Write components with familiar directives, but get pure HTML from the server. Zero JavaScript required for core functionality.
Learn PHPue through step-by-step tutorials designed for developers of all skill levels. Our tutorials cover everything from basic setup to advanced features.
PHPue includes a complete tutorial system built with PHPue itself. Each tutorial provides hands-on examples and real-world scenarios.
All tutorials are built with PHPue and demonstrate real-world usage patterns.
Start building with PHPue in minutes. No complex setup, no build process, just pure PHP power.
# Clone the starter template
git clone https://github.com/PHPue/PHPue my-app
cd my-app/www
# Start the development server
php -S localhost:8000
PHPue Framework requires PHP 8.0+ and works with any web server. No additional extensions needed.
index.php file PHPue follows a convention-based structure that makes organising your application intuitive and scalable.
about.pvue, docs.pvue)
Navbar.pvue, Sidebar.pvue)
PHPue offers two deployment strategies - choose the one that fits your workflow and security requirements.
Recommended for production - Compile locally and deploy only the optimised files.
For development or when you need instant builds on the server.
If you choose Option 2, you MUST add these security rules to prevent source code exposure.
# BLOCK access to all .pvue files (anywhere)
<FilesMatch "\.pvue$">
Require all denied
</FilesMatch>
# BLOCK access to assets/, views/, and components/
RewriteRule ^(views|components)(/.*)?$ - [F,L]
✅ Blocks all .pvue files and protects source directories
# BLOCK .pvue files
location ~ \.pvue$ {
deny all;
return 404;
}
# BLOCK source directories
location ~ /(views|components)/ {
deny all;
return 404;
}
✅ Equivalent protection for NGINX servers
PHPue automatically prevents accidental rebuilds on production servers for your protection.
This prevents accidental rebuilds that could break your live site. For intentional rebuilds, use the CLI command.
Build your app with php -S localhost:3000
Run ?build=1 to compile to .dist/
Upload only .dist/, index.php, and conversion.php
💡 Pro Tip: Always build locally and deploy the compiled .dist/ directory for maximum security and performance.
Import components and views using simple require statements.
@require ComponentName 'components/componentName.pvue';Import a component for use in your template.
#require 'views/viewName.pvue';Include a view template with its own logic.
Here's how you might structure your main application file:
<script>
@require Navbar 'components/Navbar.pvue';
#require 'views/index.pvue';
#require 'views/about.pvue';
</script>
<header>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="assets/css/styles.css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<script src="assets/js/jquery-3.7.1.min.js"></script>
</header>
<template>
<Navbar></Navbar>
<View></View>
</template>Key Points:
PHPue components are structured using familiar blocks for different concerns.
<script>
// PHP logic here
$title = "Hello World";
$users = $db->query("SELECT * FROM users")->fetchAll();
</script>
<header>
<title>{{ $title }}</title>
<meta name="description" content="My PHPue app">
</header>
<template>
<!-- Your HTML template -->
<div p-for="$user in $users">
{{ $user->name }}
</div>
</template>
<cscript>
// Client-side JavaScript (optional)
console.log('Component mounted');
</cscript>Use Vue-like directives for common tasks. All processing happens on the server.
<div p-if="$user->isAdmin">Admin Content</div>
Conditionally render elements based on PHP expressions.
<li p-for="$item in $items"></li>
Loop through arrays and objects to render lists.
PHPue respects user privacy by avoiding automatic form tracking. Instead of two-way data binding that monitors every keystroke, we encourage explicit form submissions with clear user intent.
<script>
@AJAX('POST')
function ajaxFormSubmit($input) {
$formData = $input['formData'] ?? [];
// Store in session to use later
$_SESSION['subForm_email'] = $formData['email'] ?? '';
}
</script>
<template>
<form onsubmit="handleSubmit(event, 'ajaxFormSubmit')">
<input name="email" type="email">
<button type="submit">Submit</button>
</form>
</template>
<cscript>
let emailAddr = '';
async function handleSubmit(event, methodName) {
event.preventDefault();
const formData = new FormData(event.target);
const response = await fetch('', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({
action: methodName,
formData: Object.fromEntries(formData)
})
});
if (response.status === 200) {
emailAddr = {{ $_SESSION['subForm_email'] }};
}
}
</cscript>
💡 Note: We use explicit form submission instead of automatic tracking. Users must intentionally click "Submit" - no passive data collection. - It is super easy to either modify the framework to support p-model (the logic for the REGEX is already there), or to implement your own two-way binding with the power of PHPue's AJAX capabilities and CSR support for tracking.
Respect user privacy with explicit form handling patterns.
Instant browser refreshes when you edit your .pvue or PHP files. See changes in real-time without manual reloading.
cd www && php -S localhost:3000
Visit any page with ?live parameter:
localhost:3000/your-page?live
Edit any .pvue file and watch the browser refresh automatically! 🔥
Using Docker? Hot reload works even better with full AJAX support!
💡 Pro Tip: Use Docker Compose for the best development experience with full hot reload and AJAX support!
Create server-side AJAX handlers with simple annotations.
@AJAX('POST')
function saveUser($input) {
// Handle form submission
return ['success' => true];
}@AJAX('GET')
function updateSession() {
if(isset($_GET['token'])) {
$_SESSION['userToken'] = $_GET['token'];
}
}PHPue automatically handles 404 errors with support of customisable error pages. Create beautifully styled 404 pages that match your application's design.
Current Support: Only 404 pages are supported in this version.
Create a user-friendly 404 page that helps users navigate back to your application:
<?php
global $phpue_header;
$phpue_header = <<<HTML
<script src="https://cdn.tailwindcss.com"></script>
<title>404 - Page Not Found</title>
<meta name="description" content="The page you're looking for doesn't exist">
<meta name="keywords" content="404, page not found">
<meta name="author" content="Edward Patch">
HTML;
$GLOBALS['phpue_http404_header'] = $phpue_header;
?><!-- APP WRAPPER -->
<div class="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 flex items-center justify-center p-4">
<div class="max-w-md w-full text-center">
<div class="text-6xl mb-4">🔍</div>
<h1 class="text-2xl font-bold text-gray-900 mb-2">Page Not Found</h1>
<p class="text-gray-600 mb-6">
Sorry, we couldn't find the page you're looking for.
The page might have been moved or deleted.
</p>
<div class="space-y-3">
<a href="/" class="block w-full bg-emerald-600 hover:bg-emerald-700 text-white font-medium py-3 px-6 rounded-lg transition duration-200">
Return to Homepage
</a>
<button onclick="history.back()" class="w-full border border-gray-300 hover:bg-gray-50 text-gray-700 font-medium py-3 px-6 rounded-lg transition duration-200">
Go Back
</button>
</div>
</div>
</div>
<!-- END OF APP WRAPPER -->Sorry, we couldn't find the page you're looking for. The page might have been moved or deleted.
Extend PHPue with custom PHP classes and vendor libraries using the backend/ directory.
All classes are auto-loaded when the framework starts, making them available throughout your application.
PHPue 0.0.2 fully supports Composer vendor directories and automatically detects autoload.php files.
Auto-loading: All PHP files in backend/ are automatically included when the framework initialises.
Vendor directories with autoload.php are fully supported. You can also create a custom autoload.php to control load order.
PHPue scans the backend/ directory on startup
All .php files in the backend directory are automatically included.
If backend/vendor/autoload.php exists, PHPue automatically requires it, enabling full Composer vendor support (PSR-4, classmap, and files).
Create a custom autoload.php in any directory and add your require statements to control class load order.
PHPue will load classes in the specified order and skip the brute-force scan for that directory.
Your classes are now available throughout the application via singleton patterns or direct instantiation.
Create a singleton database manager that's available throughout your application:
<?php
class SimpleDB {
private static ?self $instance = null;
public static function getInstance(): self
{
if(self::$instance === null)
self::$instance = new self();
return self::$instance;
}
public function getMessage(): string
{
return "Hello from backend class!";
}
public function getUsers(): array
{
return [
['id' => 1, 'name' => 'John'],
['id' => 2, 'name' => 'Jane'],
];
}
}
?>
// In any .pvue file script section
<script>
$db = SimpleDB::getInstance();
$users = $db->getUsers();
</script>
PHPue 0.0.2 fully supports Composer vendor directories and automatically detects autoload.php.
Simple libraries like Parsedown work out of the box. Complex dependencies may still require manual testing or a custom autoload.php.
✅ Fully Supported: Composer vendor directories
🔧 Needs Testing: Large multi-package ecosystems
# Download vendor library manually cd backend mkdir -p vendor wget https://github.com/erusev/parsedown/archive/1.7.4.zip unzip 1.7.4.zip -d vendor/ # Result: backend/vendor/parsedown-1.7.4/Parsedown.php
PHPue will automatically find and load Parsedown.php
or any autoload.php in backend/vendor/.
Class::getInstance() immediately
App.pvue, views/, or components/
autoload.php to control load order and prevent brute-force scanning
Complex libraries may still require testing, but following this sequence ensures best results.