📋 YOUR FIRST PHPUE APP

Build Your First App in 5 Minutes

No prior PHPue experience needed! We'll walk through creating a simple welcome page step by step.

🎯

What You'll Build

A clean welcome page with dynamic content and styling

📄

2 Files

⚡

Instant Results

🎨

Beautiful UI

🏗️ How PHPue Apps Are Structured

🧠

App.pvue - The Brain of Your App

This is your main application file. Think of it as the controller that manages your entire app.

What App.pvue Does:

• Loads your navigation and pages

• Handles routing between pages

• Sets up global styles and scripts

• Manages shared data

📄

App.pvue

Main Application File

<!-- Author: Edward Patch -->

<script>
    <!-- @require imports components, and would need a component name -->
    @require Navbar 'components/Navbar.pvue';
    <!-- #require imports views (it can work without it, but AJAX won't export properly -->
    #require 'views/index.pvue';

    <!-- sets the favicon header variable in PHP so we can use it in <header> -->
    $faviconHeader = ' <link rel="icon" href="assets/img/favicon_io/favicon.ico" type="image/x-icon"/>';
</script>


<header>
    <!-- HTML only or {{$var}} (App.pvue is the only area supported for dynamic headers, otherwise it's gotta stay static! PHP isn't allowed in here for safety!) -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    {{$faviconHeader}}

    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</header>


<template>
    <!-- Imports the Navbar Component -->
    <Navbar/>

    <!-- handles the view display -->
    <View/>
</template>

Key Things to Notice:

→ @require imports reusable components like Navbar

→ #require loads your page files for routing

→ <View> automatically shows the current page

→ Dynamic variables are supported in <header>

🌐

Views - Your App's Pages

Each .pvue file in the views folder becomes a page in your app. This is where you build your user interface.

Every View Has Three Parts:

PHP code that runs on the server

<template> - HTML Layout

What users see in their browser

<cscript> - Browser JavaScript

Runs in the user's browser

⚡ PHPue Offers PHP + Syntax Sugar

If any P-Directives break, just fall back to PHP! P-Directives are meant for basic use and not as a replacement for PHP.

p-if="$isAvailable"

Compiles to: <?php if($isAvailable): ?> ... <?php endif; ?>

p-for="$item in $items"

Compiles to: <?php foreach($items as $item): ?> ... <?php endforeach; ?>

{{$variable}}

In <template>: <?= htmlspecialchars($variable) ?>

In <cscript>: <?= json_encode($variable) ?>

PHP Just Works Everywhere!

In <script>: // Write normal PHP code here

In <template>:

<?php if($isAvailable): ?>
  <div>Content</div>
<?php endif; ?>

In <cscript>:

<?php if($isAvailable): ?>
  console.log("Conditional JS");
<?php endif; ?>

⚠️ In <header>: PHP is forbidden for security (use variables from <script> with {{}})

📄

views/index.pvue

Homepage

<!-- Author: Edward Patch -->

<script>
    // PHP for $lang variable
    $lang = [
        'welcome' => 'Welcome to PHPue - Unique Experience',
        'subtitle' => 'A modern PHP framework with Vue-like syntax',
        'docs' => 'Documentation',
        'github' => 'GitHub'
    ];
    // PHP for $features array!
    $features = ["Fast", "Simple", "Powerful"];
</script>


<header>
    <!-- STATIC ONLY HERE ( {{}} and PHP is not supported for safety) -->
    <title>PHPue - Welcome</title>
    <meta name="description" content="PHPue - Modern PHP framework with Vue-like syntax">
</header>


<template>
    <!-- HTML with p-directives p-if="$bShow" or p-for($item in $items) or safe context aware  -->
    <div class="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 flex items-center justify-center">
        <div class="max-w-2xl mx-auto text-center px-6">
            <!-- Logo -->
            <div class="mb-8">
                <img src="/assets/img/logo-large.png" alt="PHPue Logo" class="h-24 w-auto mx-auto">
            </div>

            <!-- Main Content -->
            <h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-4">
                            </h1>
            
            <p class="text-lg text-gray-600 mb-8">
                            </p>

            <!-- Features List -->
            <div class="flex justify-center gap-4 mb-8">
                <div p-for="$feature in $features" 
                     class="px-4 py-2 bg-white rounded-lg shadow-sm border border-gray-200 text-gray-700">
                                    </div>
            </div>

            <!-- Action Buttons -->
            <div class="flex gap-4 justify-center">      
                <a href="https://phpue.co.uk/docs" class="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors" target="blank">
                                    </a>
                
                <a href="https://github.com/PHPue/PHPue/" class="px-6 py-3 bg-gray-800 text-white rounded-lg hover:bg-gray-900 transition-colors" target="blank">
                                    </a>
            </div>
        </div>
    </div>
</template>


<cscript>
    <!-- cscript is JavaScript, (Client Side Rendering). It's already mounted! You can use PHP Injection and context aware  here-->
    console.log("PHPue welcome page loaded!");
</cscript>

Cool Features You're Using:

✨ PHP arrays become dynamic content

✨ p-for loops create lists automatically

✨ Tailwind CSS makes styling easy

✨ Separate server and browser code

👀 See Your App in Action

This Is What You're Building!

When you run your app, this is exactly what you'll see in the browser.

PHPue

Welcome to PHPue - Unique Experience

A modern PHP framework with Vue-like syntax

Fast

Simple

Powerful

🎉 This is powered by the exact code we just explored!

🚀 Ready for the Next Step?

🎨

Recommended

Add Some Style

Learn how to customize colors, layouts, and make your app look exactly how you want.

Styling your App →

📚

Resources

Explore Documentation

Dive deeper with the full PHPue documentation. Find advanced features and examples.

Read the Docs →

🎊

You Did It!

You now understand the basics of PHPue and have seen how easy it is to create a beautiful, functional web app.

What You Learned:

✓ App.pvue structure

✓ View components

✓ PHP in templates

✓ p-for directives

Explore More Tutorials Full Documentation

Share PHPue