PHP code example of ctxkiwi / vue-pre

    
        
<?php
require_once('vendor/autoload.php');

/* Start to develop here. Best regards https://php-download.com/ */

    

ctxkiwi / vue-pre example snippets

 
$vue = new \VuePre\Engine();
$vue->setCacheDirectory(__DIR__ . '/cache');

// Method 1
$data = ["name" => "world"];
$html = $vue->renderHtml('<div>Hello {{ name }}!</div>', $data);

// Method 2 - Using component directory (

// If you set your directory like this
$vue->setComponentDirectory(__DIR__ . '/components');
// It's going to look for any .php file and register the filename as a component
// So, if you have components/pages/homepage.php
// It will use this file for the <homepage> component

return [
    'beforeRender' => function (&$data) {
        $data['counter'] = 0;
    },
];

class View{
    public static function render($view, $data = []){
        // Normal PHP template engine
        ...
        return $html;
    }
    public static function renderComponent($name, $data = []){
        $vue = new \VuePre\Engine();
        $vue->setCacheDirectory(Path::get('tmp'). '/cache');
        $vue->setComponentDirectory(Path::get('views') . '/components');

        $html = $vue->renderComponent($name, $data);
        $templates = $vue->getTemplateScripts();
        $js = $vue->getJsScripts();
        $vueInstance = $vue->getVueInstanceScript('#app', $name, $data);

        $html = '<div id="app">'.$html.'</div>'.$templates.$js.$vueInstance;

        return static::render('layouts/main.html', ['CONTENT' => $html];
    }
}

class ViewController{
    public function homepage(){
        $data = [
            // Dont put private data in here, because it's shared with javascript
            'layoutData' => [
                'authUser' => \AuthUser::getUser()->getPublicData(),
            ],
            'featureProducts' => Product::where('featured', true)->limit(10)->get();
        ];
        // Render <homepage> component
        echo View::renderComponent('homepage', $data);
    }
}

// views/components/layout.php

return [
    'beforeRender' => function (&$data) {
        $data = $data['layout-data'];
    },
];

// views/components/homepage.php

// Based on your last render
$vue->getScripts();
$vue->getTemplateScripts(); // only template scripts
$vue->getJsScripts(); // only js scripts

// By component name
$vue->getTemplateScript('my-page');
$vue->getJsScript('my-page');

// Usefull
$vue->getRenderedComponentNames();

->setCacheDirectory(String $path)
->setComponentDirectory(String $path)
->setGlobals(Array $globalVariables) // e.g. ['loggedIn' => true, 'user' => ['id'=>123, 'username'=>'TerryDavis']]
->renderHtml(String $html, Array $data)
->renderComponent(String $componentName, Array $data)

// Optional settings
->ignoreAttributes(Array $attributeNames)
->unignoreAttributes(Array $attributeNames)
->getIgnoredAttributes() : Array $attributeNames

// Generating scripts
->getScripts($idPrefix = 'vue-template-');
->getTemplateScripts($idPrefix = 'vue-template-');
->getTemplateScript(String $componentName, $default = null, $idPrefix = 'vue-template-');
->getJsScripts();
->getJsScript(String $componentName, $default = null);

// Others
->getComponentAlias(String $componentName, $default = null)
->getRenderedComponentNames();