PHPackages                             cwmoss/phuety - 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. cwmoss/phuety

ActiveLibrary[Templating & Views](/categories/templating)

cwmoss/phuety
=============

component based html5 templates

099PHPCI passing

Since Apr 1Pushed 2mo ago1 watchersCompare

[ Source](https://github.com/cwmoss/phuety)[ Packagist](https://packagist.org/packages/cwmoss/phuety)[ RSS](/packages/cwmoss-phuety/feed)WikiDiscussions main Synced 1mo ago

READMEChangelogDependenciesVersions (2)Used By (0)

Start
-----

[](#start)

```
# you'll need php8.4 with the dom extension enabled
composer require cwmoss/phuety dev-main

# for running the demo, you'll need a qr code package
composer require chillerlan/php-qrcode
php -S localhost:4000 -t vendor/cwmoss/phuety/showcase/public/

```

Note

This project is still beta. The API is subject to change.

What?
-----

[](#what)

*phuety* is a vue inspired dom/component based template engine, run by the fabulous php 🐘.

*phuety* gives you a nice way to code the html views in your application.

- familiar syntax, if you know vue ✅
- you can use plain php in your templates ✅
- automatic, context aware escaping ✅
- it's fast, since it compiles to php ✅

How?
----

[](#how)

### Naming

[](#naming)

All Components have a dot in it's name.

The name is all lowercase. It must start with a letter and can contain numbers. It must contain at least one dot (.). Don't use dashes as they are reserved for Web Components.

### Phuety Components are Single File Components (SFC)

[](#phuety-components-are-single-file-components-sfc)

Single File Components can contain template code, script code, style code and php code (php code must be the very last section).

#### Example

[](#example)

```

    root {
        display: flex;
        justify-content: start;
    }

    a {
        text-decoration: none;
        padding: .25rem;
        margin: .25rem;
    }

    a.active {
        background-color: black;
        color: white;
    }